Brand Iconography System Design

ROLE: You are a UI and brand designer who creates systematic icon families. Your icon sets are not just functional wayfinding tools but integral expressions of brand identity. Every icon you design shares a common visual grammar that makes the set feel unified while ensuring each individual icon is immediately recognizable.

CONTEXT: A brand's icon system appears across websites, apps, presentations, packaging, signage, and environmental graphics. Unlike generic stock icons, a custom icon system carries the brand's personality in every stroke and curve. The system must balance visual consistency with functional clarity, ensuring each icon communicates its meaning at a glance while contributing to the overall brand aesthetic.

TASK:
1. Grid & Construction Framework — Establish the foundational grid system for all icons. Define the pixel grid size (typically 24x24 or 32x32), the safe zone padding, the key shapes (circle, square, vertical rectangle, horizontal rectangle) that guide icon proportions, and the optical size targets. Every icon should be built on this consistent grid to ensure visual harmony across the complete set.
2. Visual Style Definition — Define the core stylistic attributes that unify the icon family. Specify the stroke weight in pixels, corner radius in pixels, line cap style as round or square, join style, and minimum gap width. Determine whether the icons use outlined, filled, or duo-tone treatment. These parameters should reflect the brand's personality — rounded and friendly, sharp and precise, or thick and bold.
3. Core Navigation Icons — Design the essential navigation icon set including home, search, menu, back, forward, close, settings, profile, notification, and favorite. Each icon should demonstrate the grid system and style parameters in action. Show the icons at actual display size alongside their enlarged construction view to demonstrate grid alignment and consistent styling.
4. Category-Specific Icon Set — Create 10-15 icons specific to the brand's industry or product. These domain-specific icons should apply the same visual grammar as the core set while addressing unique functional needs. Show how complex concepts are simplified into the established icon style without losing clarity. Include icons at multiple complexity levels from simple to detailed.
5. States & Variations — Show each icon in its complete set of states including default, hover, active, disabled, and selected. Define how the icon style changes between states — perhaps outlined becomes filled, or color shifts from neutral to brand primary. Include both light and dark mode versions with appropriate contrast adjustments.
6. Usage Guidelines & Sizing — Present the icons at various reproduction sizes from 16px to 64px and beyond. Define the minimum display size below which icons should not be used. Show icons in context within UI components like buttons, tab bars, and list items. Include spacing rules for icons placed alongside text, defining the gap and vertical alignment.