What problem does it solve? Product teams often place mismatched SVG icons wherever space allows, mixing unrelated icon libraries, breaking visual consistency, and creating accessibility issues with tiny touch targets or color-only state indicators. This Skill turns icon work into a repeatable visual-language process grounded in established platform references. ## Core Features & Use Cases - Family-First Selection: Audit the existing icon language, then align with established families like SF Symbols, Material Symbols, Fluent 2, or IBM Carbon instead of mixing random icon sets. - Custom Icon Design Rules: Extract family geometry (stroke, corner radius, optical size, negative space) before creating custom extensions, with metaphor and licensing checks. - State, Size & Localization Verification: Validate selected/disabled variants, optical sizing per rendered pixel size, icon-text alignment, touch targets, and RTL mirroring behavior. - Use Case: When adding a new toolbar action icon, use this Skill to confirm the metaphor, match the current family's stroke and corner treatment, verify the selected state uses fill rather than color alone, and render the full icon set side by side for coherence. ## Quick Start Use the iconography-system skill to audit the icons in my toolbar and recommend a consistent family with proper selected states and touch targets.
