Icon System Template for Product Managers

Start with an existing library (Heroicons, Lucide, Phosphor) and customize only when the library does not have what you need. Drawing a full icon set from scratch takes months and the quality will be inconsistent unless you have a dedicated icon designer. The important thing is that all icons follow the same grid, stroke width, and corner radius. If you mix libraries, redraw the borrowed icons to match your standards.

Most products need 3-4 sizes: small (16px) for compact contexts, medium (20px) for default UI, large (24px) for navigation and headers, and optionally extra-large (32px) for empty states and illustrations. Avoid offering arbitrary sizing. Constraining to fixed sizes ensures icons always look crisp because they are designed for those specific pixel grids.

Inline SVG (as React/Vue components) is the current best practice. Each icon is a component that accepts `size`, `color`, and `aria-label` props. Icon fonts have alignment and rendering issues. SVG sprites work but add complexity without significant benefit over component-based approaches. The component approach also enables tree-shaking, so unused icons are not included in the bundle.

Email clients have poor SVG support. For email templates, export icons as PNG at 2x resolution (for retina displays) and embed them as `<img>` tags. Keep email icon usage minimal (3-5 per template) since each is a separate HTTP request or inline base64 payload.

Publish a Figma template file with the grid, stroke settings, and corner radius pre-configured. Require all new icons to be drawn on this template. Review every new icon in the bi-weekly design system review against 3 criteria: matches the grid, matches the stroke style, and is optically balanced within the live area. The [design review template](/templates/design-review-template) provides a structured critique format for these reviews. ---