Brand Icon Guidelines

Icons are an extension of your brand's visual language. When designed and applied consistently, they reinforce brand recognition and create a cohesive user experience. This guide helps you develop icon guidelines that serve both brand and usability goals.

Why Brand Icon Guidelines Matter

Without guidelines, icon consistency degrades over time:

• Different designers make different stylistic choices
• Third-party icons get mixed in without consideration
• Implementation varies across platforms and products
• Updates introduce inconsistencies with existing icons

Clear guidelines provide a reference that keeps everyone aligned, even as teams and products grow.

Core Style Specifications

Define the fundamental visual characteristics that make your icons recognizable:

Stroke and Fill

• Style type - Outline, filled, duotone, or combination
• Stroke weight - Exact pixel measurement (e.g., 1.5px)
• Stroke caps - Round, square, or butt
• Stroke joins - Round, miter, or bevel

Geometry

• Base grid - Canvas size and safe zones
• Corner radius - Consistent rounding values
• Line angles - Preferred angles (45°, 90°) vs. freeform
• Optical alignment - Rules for centering different shapes

Visual Weight

• Density - How much of the canvas icons should fill
• Detail level - Appropriate complexity for the style
• Balance - How to achieve consistent visual weight

Color Guidelines

Define how color applies to icons within your brand system:

• Primary colors - Main icon color(s) for default state
• Interactive colors - Hover, active, focus states
• Semantic colors - Success, warning, error applications
• Dark mode - Color adjustments for dark backgrounds
• Monochrome rules - When to use single color vs. multi-color

Include color codes (hex, RGB) and specify which palette colors are approved for icons.

Size Specifications

Document standard sizes and usage contexts:

• Touch size - Minimum for interactive icons (typically 44-48px target)
• Display sizes - Standard sizes used across products (16, 24, 32, 48px)
• Scaling rules - How icons should scale responsively
• Minimum size - Smallest size at which icons remain legible

Spacing and Layout

Consistent spacing creates visual harmony:

• Icon padding - Internal spacing within the icon boundary
• Icon-to-text spacing - Gap between icons and labels
• Icon-to-icon spacing - Minimum gap in icon groups
• Container padding - Spacing when icons are in buttons or cards

Platform Considerations

Address how icons adapt across platforms:

• Web - Format preferences, implementation method
• iOS - SF Symbols integration or custom icon rules
• Android - Material Design alignment considerations
• Desktop - Windows and macOS application icons

Decide whether to use platform-native icons for system functions or maintain brand consistency across all platforms.

Do's and Don'ts

Visual examples are the clearest guidelines. Show:

• Correct examples - Icons that follow guidelines
• Incorrect examples - Common mistakes with explanations
• Edge cases - How to handle unusual situations
• Before/after - Improvements from applying guidelines

Designers learn faster from examples than from written rules alone.

Metaphor Guidelines

Define how abstract concepts translate to visual metaphors:

• Preferred metaphors - Which visual representations to use for common concepts
• Avoided metaphors - Outdated or culturally problematic imagery
• Consistency rules - Same concept should use same metaphor throughout

For example: "Settings" might always use a gear, never a wrench or slider.

Animation Standards

If icons animate, document the standards:

• Duration - Standard timing for transitions
• Easing - Preferred easing curves
• Entrance/exit - How icons appear and disappear
• State changes - How icons transition between states
• When to animate - Appropriate contexts for animation

Governance and Updates

Establish how guidelines evolve:

• Ownership - Who maintains and updates guidelines
• Request process - How to propose new icons or guideline changes
• Review cadence - How often guidelines are reviewed
• Version history - Tracking changes over time
• Deprecation policy - How old icons are phased out

Distribution and Access

Make guidelines accessible to everyone who needs them:

• Publish in your design system documentation
• Include in onboarding for designers and developers
• Link from component libraries and icon files
• Keep guidelines and icon assets in sync

Guidelines only work if people can find and reference them easily.