Icon Set Brief
When to Use This Skill
Use this skill when you need to:
- Commission a custom icon set for your website, app, or marketing
- Brief a designer on icon style, sizes, and usage requirements
- Define consistency rules for icons across your brand
- Create specifications for icon delivery and implementation
DO NOT use this skill for selecting stock icon libraries, designing icons yourself, or creating illustration briefs. This is for briefing custom icon set design.
Core Principle
ICONS MUST BE INSTANTLY RECOGNIZABLE AT THEIR SMALLEST SIZE — IF THE ICON NEEDS A LABEL TO BE UNDERSTOOD, THE ICON HAS FAILED.
Phase 1: Brief
Required Inputs
| Input |
What to Ask |
Default |
| Icon count |
"How many icons do you need?" |
15-25 |
| Use cases |
"Where will icons be used? (website, app, presentations, print)" |
Website |
| Icon list |
"List each icon needed with its concept (e.g., settings gear, user profile, shopping cart)." |
Must be provided |
| Style preference |
"Line, filled, duotone, or 3D? Share 2-3 icon sets you admire." |
Line style |
| Brand guidelines |
"Brand colors, visual style, personality." |
Must be provided |
| Sizes needed |
"What sizes? (16px, 24px, 32px, 48px)" |
24px primary, 16px and 32px variants |
GATE: Confirm brief before proceeding.
Phase 2: Design
Style Specification
Define the visual rules for the entire set:
- Style: Line, filled, duotone, or combination
- Stroke weight: Consistent across all icons (e.g., 1.5px at 24px size)
- Corner radius: Sharp, rounded, or mixed with specific radius
- Grid: Base grid size (24x24 with 2px padding = 20x20 safe area)
- Color: Monochrome, two-color, or full brand palette
- Perspective: Flat or isometric
Consistency Rules
- All icons must share the same stroke weight, corner radius, and visual density
- Key lines (horizontal, vertical, circular) should align across the set
- Optical sizing: simpler icons may need slightly larger visual weight to feel balanced
GATE: Present the style specification with example references before the icon list.
Phase 3: Build
Deliverables
1. Complete Icon Brief Document
- Style specification with all visual rules
- Full icon list with concept description per icon
- Size and format requirements
- Usage context for each icon
2. Technical Specification Sheet
| Spec |
Value |
| Grid size |
24x24px |
| Safe area |
20x20px (2px padding) |
| Stroke weight |
1.5px |
| Corner radius |
2px |
| Export sizes |
16, 24, 32, 48px |
| File formats |
SVG (primary), PNG (fallback) |
| Color modes |
Single color (inherits CSS color) |
3. Naming Convention
- File naming format:
icon-[concept]-[size].[format]
- Example:
icon-settings-24.svg, icon-user-16.png
- Organized in folders by size or by concept
4. Quality Checklist
Phase 4: Polish
Implementation Guide
- How to integrate SVGs into the website or app
- CSS color inheritance setup for monochrome icons
- Accessibility notes: pair icons with labels for screen readers
Future Expansion
- How to request additional icons while maintaining consistency
- Designer handoff notes for the icon grid and style rules
- Template file for designing new icons in the established style
Example 1: SaaS Dashboard Icons (20 icons)
Style: 1.5px line, rounded corners, monochrome. Icons for: dashboard, analytics, settings, users, billing, notifications, search, filters, export, help, plus 10 feature-specific icons.
Example 2: E-commerce Website Icons (15 icons)
Style: 2px line with filled accents, brand color duo. Icons for: cart, wishlist, search, menu, account, shipping, returns, payment, star rating, filter, sort, compare, gift, support, location.
Anti-Patterns
- Inconsistent stroke weight — one icon with 1px strokes next to one with 3px strokes looks like two different icon sets.
- Too detailed at small sizes — intricate icons that look great at 48px become blobs at 16px. Design for the smallest size first.
- No grid system — icons designed freehand without a grid will never align consistently.
- Mixing styles — line icons and filled icons in the same set create visual discord unless intentionally designed as a system.
- Raster-only delivery — PNGs cannot scale. Always require SVG as the primary format.
Recovery
- Designer delivers inconsistent icons: Provide the style spec and ask for a revision pass focused on stroke weight and visual density alignment.
- Icons not clear at small size: Request simplified versions for 16px use. Many icon sets have detailed and compact variants.
- Budget too low for custom icons: Recommend a quality open-source icon library (Lucide, Phosphor, Tabler) and customize colors to match the brand.
- Icon list keeps growing: Set a V1 scope and commit to it. Additional icons come in a V2 batch after V1 is approved and implemented.
1---2name: icon-set-brief3description: Briefs icon set design with style direction, size requirements, use cases, consistency guidelines, and delivery specifications. Use when commissioning custom icons for your brand.4---56# Icon Set Brief78## When to Use This Skill910Use this skill when you need to:11- Commission a custom icon set for your website, app, or marketing12- Brief a designer on icon style, sizes, and usage requirements13- Define consistency rules for icons across your brand14- Create specifications for icon delivery and implementation1516**DO NOT** use this skill for selecting stock icon libraries, designing icons yourself, or creating illustration briefs. This is for briefing custom icon set design.1718---1920## Core Principle2122ICONS MUST BE INSTANTLY RECOGNIZABLE AT THEIR SMALLEST SIZE — IF THE ICON NEEDS A LABEL TO BE UNDERSTOOD, THE ICON HAS FAILED.2324---2526## Phase 1: Brief2728### Required Inputs2930| Input | What to Ask | Default |31|-------|------------|---------|32| **Icon count** | "How many icons do you need?" | 15-25 |33| **Use cases** | "Where will icons be used? (website, app, presentations, print)" | Website |34| **Icon list** | "List each icon needed with its concept (e.g., settings gear, user profile, shopping cart)." | Must be provided |35| **Style preference** | "Line, filled, duotone, or 3D? Share 2-3 icon sets you admire." | Line style |36| **Brand guidelines** | "Brand colors, visual style, personality." | Must be provided |37| **Sizes needed** | "What sizes? (16px, 24px, 32px, 48px)" | 24px primary, 16px and 32px variants |3839**GATE: Confirm brief before proceeding.**4041---4243## Phase 2: Design4445### Style Specification4647Define the visual rules for the entire set:4849- **Style:** Line, filled, duotone, or combination50- **Stroke weight:** Consistent across all icons (e.g., 1.5px at 24px size)51- **Corner radius:** Sharp, rounded, or mixed with specific radius52- **Grid:** Base grid size (24x24 with 2px padding = 20x20 safe area)53- **Color:** Monochrome, two-color, or full brand palette54- **Perspective:** Flat or isometric5556### Consistency Rules5758- All icons must share the same stroke weight, corner radius, and visual density59- Key lines (horizontal, vertical, circular) should align across the set60- Optical sizing: simpler icons may need slightly larger visual weight to feel balanced6162**GATE: Present the style specification with example references before the icon list.**6364---6566## Phase 3: Build6768### Deliverables6970**1. Complete Icon Brief Document**71- Style specification with all visual rules72- Full icon list with concept description per icon73- Size and format requirements74- Usage context for each icon7576**2. Technical Specification Sheet**77| Spec | Value |78|------|-------|79| Grid size | 24x24px |80| Safe area | 20x20px (2px padding) |81| Stroke weight | 1.5px |82| Corner radius | 2px |83| Export sizes | 16, 24, 32, 48px |84| File formats | SVG (primary), PNG (fallback) |85| Color modes | Single color (inherits CSS color) |8687**3. Naming Convention**88- File naming format: `icon-[concept]-[size].[format]`89- Example: `icon-settings-24.svg`, `icon-user-16.png`90- Organized in folders by size or by concept9192**4. Quality Checklist**93- [ ] All icons visually consistent in weight and style94- [ ] Readable at smallest size (16px)95- [ ] SVGs are clean (no unnecessary groups, proper viewBox)96- [ ] Pixel-aligned at primary size97- [ ] Accessible: sufficient contrast, not sole indicator of meaning9899---100101## Phase 4: Polish102103### Implementation Guide104105- How to integrate SVGs into the website or app106- CSS color inheritance setup for monochrome icons107- Accessibility notes: pair icons with labels for screen readers108109### Future Expansion110111- How to request additional icons while maintaining consistency112- Designer handoff notes for the icon grid and style rules113- Template file for designing new icons in the established style114115---116117## Example 1: SaaS Dashboard Icons (20 icons)118119**Style:** 1.5px line, rounded corners, monochrome. Icons for: dashboard, analytics, settings, users, billing, notifications, search, filters, export, help, plus 10 feature-specific icons.120121## Example 2: E-commerce Website Icons (15 icons)122123**Style:** 2px line with filled accents, brand color duo. Icons for: cart, wishlist, search, menu, account, shipping, returns, payment, star rating, filter, sort, compare, gift, support, location.124125---126127## Anti-Patterns128129- **Inconsistent stroke weight** — one icon with 1px strokes next to one with 3px strokes looks like two different icon sets.130- **Too detailed at small sizes** — intricate icons that look great at 48px become blobs at 16px. Design for the smallest size first.131- **No grid system** — icons designed freehand without a grid will never align consistently.132- **Mixing styles** — line icons and filled icons in the same set create visual discord unless intentionally designed as a system.133- **Raster-only delivery** — PNGs cannot scale. Always require SVG as the primary format.134135---136137## Recovery138139- **Designer delivers inconsistent icons:** Provide the style spec and ask for a revision pass focused on stroke weight and visual density alignment.140- **Icons not clear at small size:** Request simplified versions for 16px use. Many icon sets have detailed and compact variants.141- **Budget too low for custom icons:** Recommend a quality open-source icon library (Lucide, Phosphor, Tabler) and customize colors to match the brand.142- **Icon list keeps growing:** Set a V1 scope and commit to it. Additional icons come in a V2 batch after V1 is approved and implemented.
reaperinvest