---
name: icon-design-system
description: research backed app icon and logo guideline system built from 15,864 real app icons plus standard color math for luminance, contrast, and color distance, with a reusable prompt for llms and designers.
---

# icon and logo design system

this guide helps you design app icons and logos that are pretty, clear, and proven. every rule comes from real data or a published standard. use it as a checklist before you ship, and as a prompt you can give to any llm.

it is written in simple words and lowercase so it is easy to read and easy for llms to follow.

---

## 1. core ideas

1. **trust data first**: our dataset has 15,864 real app store icons. white and blue are more than half the store, but purple, green, and red rate higher. when taste and data clash, trust data.
2. **use math before eye**: small icons fool the eye. compute light, contrast, and color distance first.
3. **design for your genre**: each genre has its own color habit. a finance icon should not copy a game icon.
4. **keep it simple**: one clear shape, two to three colors, clean background. this reads at 29 pixels and still looks good at 1024 pixels.
5. **make it readable for all**: if contrast is too low, the design is not done.

---

## 2. how the research was done

dataset: 15,864 app store icons with dominant color, brightness, saturation, colorfulness, genre, rating, rating count, and weighted rating. weighted rating is a fair average that balances high ratings with enough rating count, so a 5 star app with 10 votes does not beat a 4.8 star app with 1m votes. genre ranks only use genres with at least 100 icons so the mean is stable. smallest color group is gray with 244 icons, still large enough to compare.

stats below are group means from that dataset. gaps look small because app ratings cluster near 4.2 to 4.4, but at store scale a gap of 0.02 to 0.05 is meaningful. correlation is not proof of cause, so use these numbers as strong hints plus math checks, not magic.

how to resolve file urls: this skill is self contained. all key numbers are written inline below, so you do not need to fetch anything to use it. if you fetched this file from a url like `https://some-domain/skills/icon-design-system.md`, then that origin is the base. prepend it to any `/charts/...` or `/data/...` path on this page to get the full url, for example `https://some-domain/charts/rating-by-color.svg`. if you only got pasted text with no url, ignore the file links and use the inline numbers.

optional proof files on the same site as this skill:

* charts: `/charts/dominant-distribution.svg`, `/charts/rating-by-color.svg`, `/charts/rating-by-brightness.svg`, `/charts/brightness-donut.svg`, `/charts/rating-by-saturation.svg`, `/charts/rating-by-colorfulness.svg`, `/charts/rating-by-genre.svg`, `/charts/genre-color-heatmap.svg`, `/charts/genre-bubble.svg`, `/charts/genre-radar.svg`, `/charts/saturation-by-genre.svg`
* data: `/data/dominant-distribution.json`, `/data/rating-by-color.json`, `/data/rating-by-genre.json`, `/data/genre-color-matrix.json`, `/data/saturation-by-genre.json`, `/data/genre-bubble.json`, `/data/genre-radar.json`

---

## 3. what the data proves

### color share against color love

most common dominant families by count:

* white 4,693, 29.5 percent
* blue 3,708, 23.4 percent
* red 1,590, 10.0 percent
* orange 1,158, 7.3 percent
* green 1,105, 7.0 percent
* black 897, 5.7 percent
* cyan 755, 4.8 percent
* yellow 594, 3.7 percent
* purple 593, 3.7 percent
* pink 527, 3.3 percent
* gray 244, 1.5 percent

average weighted rating by color, high to low:

* purple 4.283 with 593 icons
* green 4.281 with 1,105 icons
* red 4.281 with 1,590 icons
* black 4.278 with 897 icons
* cyan 4.276 with 755 icons
* pink 4.270 with 527 icons
* blue 4.266 with 3,708 icons
* yellow 4.265 with 594 icons
* orange 4.262 with 1,158 icons
* white 4.259 with 4,693 icons
* gray 4.236 with 244 icons

lesson: safe is common but not loved. rare but well made colors like purple win. gray alone rates lowest, so never ship gray alone.

### bright against dark

* bright 11,402 icons, 71.9 percent, rating 4.269
* medium 2,779 icons, 17.5 percent, rating 4.265
* dark 1,683 icons, 10.6 percent, rating 4.260

lesson: default to bright. use dark only for premium focus like cinema, music, or pro tools, and keep the center shape bright with a thin light edge.

### vivid against muted

* vivid 6,202 icons, 39.1 percent, rating 4.284
* muted 3,981 icons, 25.1 percent, rating 4.261
* normal 5,681 icons, 35.8 percent, rating 4.254

colorfulness:

* high 7,238 icons, 45.6 percent, rating 4.268
* medium 4,941 icons, 31.1 percent, rating 4.271
* low 3,685 icons, 23.2 percent, rating 4.262

lesson: a little more punch beats flat. but do not add many hues. one dominant plus one or two supports hits the medium sweet spot.

### genres ranked by rating, min 100 icons each

* shopping 4.420 with 654 icons
* finance 4.389 with 723 icons
* travel 4.372 with 546 icons
* photo and video 4.343 with 338 icons
* productivity 4.320 with 388 icons
* health and fitness 4.320 with 554 icons
* food and drink 4.314 with 685 icons
* lifestyle 4.299 with 575 icons
* entertainment 4.296 with 486 icons
* games 4.292 with 917 icons
* business 4.283 with 567 icons
* music 4.283 with 372 icons
* utilities 4.276 with 547 icons
* sports 4.264 with 672 icons
* medical 4.260 with 677 icons

lesson: trust heavy genres need clean premium icons and get rewarded at scale. shopping averages about 368k ratings. low average genres like medical leave room to stand out fast.

### genre color habits

each genre has a learned look:

* business: white 40 percent, blue 25 percent
* education: white 43 percent, blue 23 percent
* finance: white 33 percent, blue 23 percent, green 9 percent, purple only 4 percent
* food and drink: white 30 percent, red 20 percent, green 11 percent, yellow 7 percent
* entertainment: blue 22 percent, white 19 percent, red 14 percent, black 11 percent
* travel: blue heavy with white base
* shopping: white and red with black accents

full table is at `/data/genre-color-matrix.json` with chart at `/charts/genre-color-heatmap.svg`. to fit in, match the row. to stand out, pick a gap that still rates at least 4.27, for example purple in finance.

### saturation by genre

most vivid:

* graphics and design 0.60
* travel 0.53
* food and drink 0.51
* finance 0.51
* lifestyle 0.50

most muted:

* photo and video 0.39
* productivity 0.40
* medical 0.43
* education 0.43

lesson: photo and productivity stay calm on purpose so they do not fight the content inside. graphics must show color skill so it goes vivid. see `/charts/genre-radar.svg` for brightness, saturation, colorfulness, and entropy together.

---

## 4. math you must use

all formulas below are published standards. compute them in code, do not guess by eye.

### a. luminance, itu-r bt.709 and iec 61966-2-1

for srgb, first change 0 to 255 to 0 to 1, then linearize each channel:

```
if csrgb <= 0.04045 then c = csrgb / 12.92
else c = ((csrgb + 0.055) / 1.055) ^ 2.4
```

then:

```
l = 0.2126 * r + 0.7152 * g + 0.0722 * b
```

l is 0 for black and 1 for white. green counts most, blue counts least, which matches human eyes. quick check used in code: luminance above about 0.6 feels light and needs dark glyphs and borders.

```typescript
// luminance check, same weights as bt.709
export function luminance(hex: string): number {
  const [r8, g8, b8] = hex.replace("#", "").match(/.{2}/g)!.map((h) => parseInt(h, 16) / 255)
  const lin = (c: number) => (c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4))
  return 0.2126 * lin(r8) + 0.7152 * lin(g8) + 0.0722 * lin(b8)
}
```

### b. contrast, wcag 2.2

```
contrast = (l1 + 0.05) / (l2 + 0.05)
```

where l1 is the lighter color and l2 is the darker color. range is 1 to 1 for same color up to 21 to 1 for black on white.

rules from w3c:

* 3 to 1 minimum for icons, graphics, and large text. this is wcag 1.4.11 non text contrast and 1.4.3 large text. large means about 18pt or 14pt bold.
* 4.5 to 1 minimum for normal text. this is wcag 1.4.3.
* 7 to 1 enhanced for normal text at aaa level. this is wcag 1.4.6.

for icons: glyph against background must be at least 3 to 1. any small word inside the icon must be at least 4.5 to 1. test the weakest area if there is a gradient.

```typescript
// contrast check, w3c formula
export function contrastRatio(hexA: string, hexB: string): number {
  const l1 = luminance(hexA)
  const l2 = luminance(hexB)
  const light = Math.max(l1, l2)
  const dark = Math.min(l1, l2)
  return (light + 0.05) / (dark + 0.05)
}
// pass if contrastRatio(dominant, glyph) >= 3
```

### c. color distance, cielab deltae

srgb is not uniform to the eye. cielab lab space is more uniform. l is light from 0 to 100, a is green to red, b is blue to yellow, all with d65 white point.

simple form, cie76:

```
deltae76 = sqrt((dl) ^ 2 + (da) ^ 2 + (db) ^ 2)
```

better form for real work is ciede2000, iso cie 11664-6:2022, based on cie 142-2001 and luo cui rigg 2001. it adds weights for light, chroma, hue, plus a blue and gray fix. it beats cie76, cmc, and cie94 on test sets. use a tested library for ciede2000, do not hand roll it.

how to read numbers:

* below 1: not seen by most eyes
* 1 to 2: seen only on close look
* 2 to 10: seen at a glance
* 11 to 49: clearly different but still related
* 100: opposite

icon rules derived from this plus our neighbor data:

* supports should be 10 to 40 away from dominant by deltae. below 10 looks muddy, above 40 can clash.
* two supports should be at least 20 apart from each other.
* cie76 is about 75 percent accurate, it stretches yellows and squeezes blues. use ciede2000 for final pass.

### d. palette ratio, 60 30 10

use 60 percent dominant background, 30 percent secondary, 10 percent accent. our dataset stores this as color 1, 2, 3 ratios. keep the accent small so the icon stays calm at small size.

---

## 5. step by step system

follow in order. do not skip math.

### step 1. canvas and shape

* start square, no transparency, no preset rounded corners. apple and google apply their own masks. master at 1024 by 1024 png in srgb, android needs 512 by 512 under 1024 kb.
* one focal glyph in the center with safe padding. no photo, no screen shot, no thin hairlines that vanish at low size.
* test at 1024, 180, 60, and 29 pixels on light `#f2f2f7`, dark `#1c1c1e`, black, and your brand background. if it blurs at 29, simplify.

industry proof: single focal icons and clean backgrounds lift store conversion by 10 to 25 percent in a b tests, up to 100 percent when the old icon was cluttered. test one change at a time for at least 7 days, need at least 5 percent lift with clear confidence before you call it a win.

### step 2. pick dominant by genre

* use the genre color habits table in section 3, or the full matrix at `/data/genre-color-matrix.json` on the same origin as this skill. find your genre row.
* fit mode: pick the top cell. finance picks white or blue, food picks white or red.
* standout mode: pick the rarest cell that still rates at least 4.27. finance picks purple at 4 percent with rating 4.283. entertainment picks purple or pink gaps.
* never ship gray alone at 4.236 lowest. if you love gray, pair it with a vivid accent at deltae 20 or more.

```typescript
// genre pick, fit against standout
export function suggestDominant(genreRow: Record<string, number>, goal: "fit" | "standout"): string {
  const ranked = Object.entries(genreRow).sort((a, b) => b[1] - a[1])
  if (goal === "fit") return ranked[0][0]
  const topRated = ["purple", "green", "red", "black"]
  return topRated.find((c) => (genreRow[c] ?? 0) < 0.08) ?? "purple"
}
```

### step 3. fix light and contrast

* compute luminance for dominant and glyph.
* need at least 3 to 1 for glyph on background.
* default to bright background since bright is 71.9 percent and rates 4.269 top. for dark premium looks, keep glyph bright and add a thin light edge.
* prefer filled overlapping shapes with soft shadow or analogous gradient for depth. apple hig asks for simple filled shapes, no feathered soft edges on layers.

### step 4. set vividness

* if icon feels flat, raise saturation a bit before adding new hues. vivid rates 4.284 top.
* keep colorfulness at medium. dominant plus one or two supports. high colorfulness adds noise at small size.
* match genre mood or break it with care. photo and productivity are muted near 0.39 to 0.40 for calm. travel and food near 0.51 to 0.53 for energy. if you break the norm, keep one vivid accent so you do not look washed out.

### step 5. build harmony with gradients

* prefer analogous gradients: purple to blue, orange to pink, teal to green. about 40 percent of top 100 apps use this in 2026. avoid harsh complements that vibrate at small size.
* keep supports at deltae 10 to 40 from dominant. use 60 30 10 ratios.
* more than 80 percent of users use dark mode at least sometimes, so check the icon on both modes.

### step 6. score before ship, 0 to 100

* 25 for shape reads at 29 and 60 pixels
* 25 for contrast at least 3 to 1 plus genre fit or clear standout reason
* 25 for vividness and medium colorfulness in genre band
* 25 for deltae harmony plus 60 30 10

ship at 75 or more. fail at once if contrast is below 3, if more than 3 hues fight, or if text below 4.5 is inside.

---

## 6. prompt you can give to any llm

two ways to share this skill. pick one.

* way a, paste: paste this whole file into the chat. nothing else is needed, all numbers are inline.
* way b, link: send the llm the full https url of this file, for example `https://your-site.com/skills/icon-design-system.md`. tell it the base origin is the part before `/skills/`. it must prepend that origin to any `/charts/...` or `/data/...` path on this page to fetch proof files. example: base `https://your-site.com` plus `/charts/rating-by-color.svg` gives `https://your-site.com/charts/rating-by-color.svg`. replace `your-site.com` with your real domain.

copy block (works with paste, no urls needed):

```
you are a senior app icon designer. follow this skill file and cite numbers.

inputs: brand name, genre, keywords, style where style is fit or standout.

steps:
1. look up the genre row and list top 2 expected colors plus one rare standout that rates at least 4.27.
2. compute luminance with bt.709 after linearize and check glyph contrast with (l1 + 0.05) / (l2 + 0.05). need at least 3 to 1. if low, fix glyph or edge.
3. pick 1 to 2 supports with deltae 10 to 40 from dominant and at least 20 apart. prefer analogous gradients.
4. keep vivid but simple. one dominant plus one or two supports, ratios 60 30 10.
5. output dominant hex, support hexes, ratios, contrast scores, deltae scores, genre fit note with n and mean, and a short 1024 description that still reads at 29.
6. cite one dataset fact or one standard for each choice.
```

---

## 7. do and do not

| do not | do instead |
| :--- | :--- |
| pick a liked color with no check | check the genre row, then choose fit or standout with n and mean |
| ship gray alone, rating 4.236 lowest | pair gray with a vivid accent at deltae 20 plus |
| use more than 3 hues | keep 2 to 3, medium colorfulness rates 4.271 top |
| dark on dark with no edge | compute contrast, need 3 to 1, add light edge if low |
| add tiny words or photos | one glyph, no photo, test at 29 pixels |
| ship after one look | a b test for 7 days or more, need 5 percent lift to win |

---

## 8. limits and sources

* dataset is 15,864 ios style icons at one point in time. tastes shift, so refresh stats when data grows.
* ratings cluster tight, so small gaps need large n to trust. we use min 100 per genre and report n with each mean.
* math sources: itu-r bt.709-6 and iec 61966-2-1 for `0.2126, 0.7152, 0.0722`, w3c wcag 2.2 g18, g145, 1.4.3, 1.4.11, 1.4.6 for `4.5 to 1, 3 to 1, 7 to 1`, cie 11664-4 and 11664-6:2022 plus cie 142-2001 and luo cui rigg 2001 and sharma wu dalal 2005 for cielab and ciede2000.
* platform sources: apple human interface guidelines for app icons, square png, no transparency, system masks, icon composer layers, test on light and dark and tinted looks. android adaptive icons, 512 png srgb, no round corners by hand.
* trend sources 2026: analogous gradients in about 40 percent of top 100, 2 to 3 colors max, single focal shape, dark mode use above 80 percent, icon tests lift 5 to 25 percent and up to 100 percent for cluttered baselines.

---

see the friendly walkthrough at `/blogs/skill-icon-design-system` on the same origin as this skill for examples with charts.