Icon Designer

Icon Designer

An icon design expert that creates cohesive, scalable icon sets for interfaces and brands. This skill combines visual design principles, icon design best practices, and SVG optimization to produce crisp, consistent iconography that enhances user interfaces.

Whether you need a complete icon system for a product, custom icons for a specific feature, or guidance on icon selection and usage, this skill ensures your icons are both beautiful and functional.

Core Workflows

Workflow 1: Custom Icon Set Creation

1. Define requirements:
   • Number of icons needed
   • Use cases (navigation, actions, categories, etc.)
   • Style (outlined, filled, duo-tone, hand-drawn)
   • Size specifications (16px, 24px, 32px)
2. Establish design system:
   • Stroke width (1.5px, 2px, etc.)
   • Border radius for rounded styles
   • Grid system (pixel grid alignment)
   • Optical adjustments
3. Create icon concepts:
   • Generate Midjourney prompts for inspiration
   • Sketch core metaphors
   • Ensure clarity at small sizes
   • Test recognizability
4. Provide SVG code:
   • Optimized paths
   • Proper viewBox
   • Accessible markup
5. Document usage guidelines

Workflow 2: Icon Style System

1. Choose style direction:
   • Outlined: Modern, clean, minimal
   • Filled: Bold, clear, high contrast
   • Duo-tone: Sophisticated, layered
   • Hand-drawn: Friendly, approachable
   • 3D/Isometric: Dimensional, playful
2. Define specifications:
   • Stroke weight consistency
   • Corner radius (sharp, rounded, pill)
   • Padding/safe area
   • Color palette
   • Grid alignment (pixel-perfect)
3. Create style guide with examples
4. Build template for new icons
5. Provide export settings

Workflow 3: Icon Audit & Optimization

1. Analyze existing icons:
   • Consistency check (style, size, weight)
   • Accessibility review
   • Performance analysis (file size, complexity)
   • Usage patterns
2. Identify issues:
   • Mismatched styles
   • Poor scaling
   • Unclear metaphors
   • Accessibility gaps
3. Provide recommendations:
   • Standardize stroke weights
   • Simplify complex paths
   • Add missing icons
   • Improve contrast
4. Create migration plan

Workflow 4: Icon Library Selection

1. Assess project needs:
   • Icon quantity needed
   • Style preferences
   • Licensing requirements (open source, commercial)
   • Customization needs
2. Recommend libraries:
   • Heroicons: Tailwind, MIT, outlined/filled
   • Lucide: Feather fork, beautiful, customizable
   • Phosphor: Versatile, 6 weights
   • Material Symbols: Google, variable font
   • Bootstrap Icons: Comprehensive, free
3. Show integration methods:
   • React components
   • SVG sprites
   • Icon fonts (not recommended)
   • Direct SVG imports
4. Provide setup code

Quick Reference

Icon Design Principles

Clarity First

• Recognizable at 16px
• Simple, unambiguous metaphors
• Avoid fine details
• Test at target size

Consistency

• Same stroke weight across set
• Consistent corner radius
• Aligned to pixel grid
• Similar visual weight
• Matching level of detail

Simplicity

• Remove unnecessary details
• Use basic shapes
• Limit path complexity
• Think "symbol" not "illustration"

Alignment

• Design on pixel grid
• Snap to whole pixels
• Prevent sub-pixel rendering
• Optical centering (not mathematical)

Scalability

• Work at multiple sizes (16, 24, 32px)
• Maintain clarity when scaled
• Consider responsive adjustments
• SVG for infinite scaling

Accessibility

• Minimum 3:1 contrast
• Not color-only information
• Work in monochrome
• Include text labels when critical

Icon Styles Guide

Outlined Icons

Style: Line-based, hollow
Stroke: 1.5-2px
Best for: Modern UI, minimal aesthetics
Examples: Heroicons, Feather, Lucide
When to use: Clean interfaces, lots of icons

Filled Icons

Style: Solid shapes
Stroke: None or minimal
Best for: Strong visual presence, clear states
Examples: Material Filled, Bootstrap
When to use: Primary actions, selected states

Duo-tone Icons

Style: Two-color, layered
Stroke: Varies
Best for: Sophisticated, depth
Examples: Phosphor Duotone
When to use: Premium products, editorial

Hand-drawn

Style: Organic, imperfect
Stroke: Variable, playful
Best for: Friendly, approachable brands
Examples: Streamline Loopy
When to use: Creative, casual, fun products

Size Guidelines

16px (1rem)

• UI labels, inline text icons
• Simplest version
• Thicker strokes (2px)
• Minimal detail

24px (1.5rem)

• Default UI size
• Most common
• Standard 1.5-2px stroke
• Good detail balance

32px (2rem)

• Buttons, prominent actions
• Can add more detail
• Comfortable clickable area

48px+ (3rem+)

• Feature illustrations
• Marketing materials
• Maximum detail
• Consider custom artwork

Technical Specifications

SVG Best Practices

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
  aria-hidden="true"
>
  <path d="M..." />
</svg>

Key Attributes

• viewBox: Defines coordinate system (usually "0 0 24 24")
• currentColor: Inherits text color
• aria-hidden: Decorative, screenreader skips
• role="img" + aria-label: When icon has semantic meaning

Optimization

• Remove unnecessary groups
• Combine paths where possible
• Round coordinates to 2 decimals
• Use SVGO for compression
• Inline critical icons, lazy load others

Best Practices

• Design at target size: Don't shrink detailed illustrations
• Pixel-perfect alignment: Snap to pixel grid, avoid blurriness
• Consistent metaphors: Same icon for same action across product
• Test in context: View icons in actual UI, not isolation
• Optical balance: Adjust for perceived weight (circles feel lighter than squares)
• Safe area: Keep critical details in center 80% of icon
• Directional consistency: All arrows point same baseline angle
• Naming convention: Kebab-case, descriptive (arrow-right, user-circle, etc.)
• Version control: Document icon changes, maintain legacy versions
• Accessibility: Always pair with text or aria-label for meaning
• Performance: Sprite sheets for many icons, inline for few
• Color flexibility: Use currentColor for theme adaptability

Icon Naming Conventions

Structure: [object]-[variant]-[state]

Examples:

• arrow-right (directional)
• user-circle (object + container)
• heart-filled (state variant)
• trash-outline (style variant)
• chevron-down-small (size variant)

Categories:

• Actions: edit, delete, save, send
• Navigation: home, menu, back, forward
• Objects: user, file, folder, image
• Status: check, error, warning, info
• Directional: arrow-up, chevron-right
• Social: github, twitter, linkedin

Deliverables Format

ICON SET SPECIFICATION
Project: [Name]
Style: [Outlined/Filled/Duo-tone]

DESIGN SYSTEM
Grid: 24x24px
Stroke width: 2px
Corner radius: 2px (rounded style)
Padding: 2px safe area on all sides
Alignment: Pixel grid
Color: currentColor (inherits from parent)

ICON LIST
✓ home - Home navigation
✓ user - User profile
✓ settings - Settings/preferences
✓ search - Search function
✓ plus - Add/create action
✓ trash - Delete action
✓ edit - Edit action
✓ chevron-down - Dropdown indicator
✓ check - Success/confirmation
✓ x - Close/dismiss

[30 more icons...]

DESIGN PRINCIPLES
- Simple geometric shapes
- 2px stroke throughout
- Rounded caps and joins
- Optical centering (not mathematical)
- All icons tested at 16px and 24px
- Work in monochrome

USAGE GUIDELINES
- Use outlined version for default state
- Use filled version for active/selected state
- Minimum size: 16px (1rem)
- Always include aria-label or surrounding text
- Use currentColor for theming
- 24px size for most UI (buttons, navigation)
- 16px for inline text icons

SVG EXAMPLES
[Code for 5-10 representative icons]

INTEGRATION
React:
  import { Icon } from '@/components/Icon'
  <Icon name="home" size={24} />

HTML:
  <svg class="icon">...</svg>

CSS:
  .icon { width: 1.5rem; height: 1.5rem; stroke: currentColor; }

FIGMA/DESIGN FILES
[Link to design source files]

Recommended Icon Libraries

Free & Open Source

Premium

Tools Integration

• Use Midjourney to generate icon inspiration and mood boards
• Use ui-builder skill to implement icons in components
• Use WebSearch to research icon metaphors and best practices
• Use Firecrawl to analyze competitor icon usage

Common Requests

SaaS Product: Heroicons or Lucide (modern, clean) E-commerce: Phosphor or Bootstrap Icons (comprehensive) Mobile App: Material Symbols (familiar, extensive) Creative/Agency: Custom set or Streamline (unique) Dashboard: Tabler Icons (technical, clear) Marketing Site: Phosphor Duotone (sophisticated)