UI Icon Design

Design icons as functional interface language, not isolated decoration. Prefer a suitable icon from the product's established library before drawing a custom one.

Read references/icon-design-reference.md when establishing a new family, matching Material/Fluent/Carbon conventions, resolving accessibility questions, or performing a detailed audit.

Starter defaults when no design system exists

Use these defaults to begin work when the product has no icon library, platform specification, or adjacent family to match. Treat them as hypotheses to validate, not universal requirements. Replace them as soon as target-system evidence is available.

• Start on a 24 px reference canvas, then inspect and adjust every actual output size. Do not treat 24 px as a minimum visible glyph size.
• Begin with one consistent nominal stroke or silhouette weight. Make optical and size-specific corrections when identical measurements produce unequal apparent weight.
• Choose an outline, filled, or paired state model before building the set. Mix outline and filled forms only for a defined purpose, such as a predictable selected state.
• Begin in one color to verify silhouette and negative space. Introduce color through semantic roles or tokens; treat red for danger, green for success, and blue for information as familiar possibilities rather than universal meanings. Never rely on color alone.
• Choose a limited angle vocabulary to create family resemblance. Fifteen-degree increments are a reasonable starting grid, but preserve metaphor fidelity and optical clarity instead of forcing every form onto it.
• If the platform is still unknown, reserve roughly a 44 × 44 logical-unit interaction target around the glyph. Once the platform is known, use its units and target-size rules; keep glyph size, hit target, and spacing as separate decisions.
• Keep an editable vector master. Prefer SVG for web handoff, but export the formats and path construction required by the destination.
• Search established libraries first. Draw a custom icon only when there is a real semantic, platform, or brand gap that existing assets cannot resolve.