Icon Generator

Constrain shapes to a tiny set (circle, square, triangle, star, heart) and define stroke, corner radius, and proportions. A small, consistent vocabulary makes icons feel related.

Document the geometry: viewBox, optical alignment rules, and stroke weights that scale. An Icon Generator should encode these constraints so every export looks like it came from the same family, even when many contributors are involved.

Build a reference grid with keylines for curves and diagonals, include overshoot guides for circles and pointed shapes, and note optical corrections (e.g., nudging diagonals to look centered). These artifacts prevent subtle drift in complex sets and let new icons blend seamlessly with old ones.

Work on a 24×24 grid and align strokes to half‑pixels when needed. Export vector, but preview at target pixel sizes to avoid blur.

Snap hairlines to device pixels at small sizes and test on low‑DPI screens. Provide presets for 16/20/24/32px so teams avoid fractional scaling that softens edges.

For multi‑density platforms, provide device‑pixel ratio guidance and a simple checklist: no fractional transforms, avoid filters at small sizes, and verify crisp corners in dark and light themes. The Icon Generator can automate these checks during export.

Use color to signal state and importance. Provide monochrome defaults with CSS theming for dark/light modes.

Prefer tokens over literal fills and keep contrast safe. When icons represent actions (delete, success), tie hues to semantic roles and include a neutral fallback for unknown contexts.

Document a minimal palette for “semantic” (error, warning, success, info) and a separate one for “decorative.” The generator should refuse ambiguous mixes and warn when contrast falls below thresholds near text.

Icons that convey meaning need accessible labels. Maintain 44×44 touch targets for interactive icons and ensure sufficient contrast.

Provide ARIA labeling guidance and ensure focus styles remain visible against varied backgrounds. The Icon Generator can export example markup to eliminate guesswork.

For keyboard users, ensure icons in buttons announce roles and state; avoid tooltip‑only meanings that are inaccessible on touch. Include motion‑reduced variants for animated icons.

Inline small, dynamic icons; sprite or components for repeated sets. Strip metadata, collapse groups, and prefer CSS for color changes.

Bundle icons thoughtfully—avoid shipping entire sets when only a few glyphs are needed. An Icon Generator that emits tree‑shakeable components keeps apps fast by default.

Measure cost where it matters: in long lists, spinners, and charts. Prefer reuse with symbols, cache aggressively, and expose an API to opt‑out filters and masks on low‑end devices.

Validate paths, run SVGO, and snapshot test icons. Version tokens for stroke width and corner radius to keep sets consistent.

Automate naming, ids, and symbol exports. Include a specimen page in CI so visual diffs catch regressions before release.

Ship a simple contribution guide: file naming, grid usage, and review checklist. The generator should be the single source of truth for exports so artifacts are consistent across repos and packages.