# DESIGN.md · Simple Icons (LG-009)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Open Brand Assets · Category: H. Logos and Brand Identity
- Platforms: Web
- Color theme: Monochrome light · Layout pattern: Card grid · Mood: Utilitarian, data-dense
- License / terms: CC0-1.0 (SVG data); brand logos remain their owners’ trademarks (see the project DISCLAIMER)
- Industry: Open-source design assets
- Patterns: Search-first gallery, Gallery grid

Over 3,000 single-color SVG brand icons with official hex colors, for UI use (e.g. ‘Sign in with…’ buttons, integrations lists). Tip: CC0 covers the SVG files, not the trademarks: always follow each brand’s own guidelines.

### Analysis (ours)
simpleicons.org (our capture) is a utilitarian tool in a monospace face: a title with the icon count (3,453 at capture), then a control row (Search, Order, Theme, Download as SVG or PNG, Layout) above a dense card grid. Each card shows a black brand icon, the brand name and a footer strip filled with that brand’s color and its hex value, plus search and download buttons; some cards carry a license tag (MIT, MPL-2.0, CC-BY-SA-4.0) or a ‘Brand guidelines’ link. Lesson: putting license and guideline flags on each card, at the moment of download, is the right way to handle trademark assets. Pitfall: CC0 covers the SVG data only; the logos remain trademarks, and the listed hex is a convenience, not a guarantee of the brand’s current color.

### Best practices (ours)
- Use Simple Icons for ‘Sign in with…’ buttons and integration lists, at one size and one style.
- Follow each brand’s guidelines when shown (some require their own button styles).
- Check the brand’s current color in its own guidelines before using the listed hex in a hero or ad.
- Give icon-only brand links an accessible name (‘GitHub’), not just the SVG.

### Usage terms at a glance (our summary, not legal advice)
- Commercial use: Yes (SVG data CC0); trademarks still apply
- Attribution: Not required for SVG data
- Redistribution: SVG data CC0; marks belong to owners
- How you get it: SVG/PNG download, npm package

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~43%
- `#5C3C4E` ~5%
- `#B8B1A7` ~5%
- `#E5E6E6` ~3%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
No component inventory documented for this entry.

## Layout rules
- Observed layout pattern: **Card grid** (from our captures).

## Do’s and don’ts
- Do: Keep chrome neutral and let content (images, icons, type) carry color.
- Don’t: Don’t introduce decorative color that competes with content.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://simpleicons.org
- Library entry: https://design-library-byt.pages.dev/entry/LG-009