# Icon rules · V1

Use Lucide SVGs from the existing dependency/assets, with viewBox `0 0 24 24`, fill none, currentColor stroke, stroke-width 2, round caps and joins. Keep the Lucide license with distributed assets. Do not redraw glyphs, mix icon libraries, or replace company logos with Lucide.

Icons are optional by use case. Clear labels can stand alone; primary, secondary and destructive actions do not require an icon. Directional navigation, recognizable edit/delete actions and dropdown indicators are useful contextual uses.

| Role | Icon | Layout |
|---|---|---|
| Navigation / toolbar / chip | 16×16 | Shared button/chip flex layout; 8px gap |
| Icon-only action / dialog close | 16×16 | Shared 40×40 target, accessible name required |
| Apply / add-row action | 20×20 | Existing explicit source role; not a global icon enlargement |
| Select caret | 16×16 | Existing wrapper, 16px end inset; no pointer interception; native select semantics |

Decorative icons accompanying text use aria-hidden=true and focusable=false. Put an accessible name on an icon-only button; title alone is insufficient. Preserve text labels for responsive toolbars, including when visually clipped. Status/error icons supplement words and never become the only indication of meaning. Keep SVGs out of the tab order. Retain the existing focus ring and forced-colors native select fallback.

## Evidence and limits

Source: WSDMM `src/app/components/ConfigWizard.tsx` imports Lucide, with 16px Upload/FileJson/ArrowLeft/Download/ArrowRight at lines 566/576/603/617/649. `wizard-steps/DevicesStep.tsx` uses 16px Edit2/Trash2 (173/184) and 20px Plus (205). Source toolbars have smaller mobile targets; do not claim every source action is 44px. The shared icon-only 40px target is an explicit standard extension, not the SVG size.

Shared implementation: `scss/_action-styles.scss` controls 16px SVGs, nonshrinking flex alignment, 20px Apply/add exceptions and 40px icon actions. `scss/_field-styles.scss` controls the select caret. Existing SVG markup fixes stroke 2 and currentColor. The control UI skill and generic gallery are supporting references; neither overrides these verified component roles. No blanket button-icon requirement is adopted.

[Live existing-component reference](../icons.html) · [Rendered checks](reference/icons-verification.json). The review does not certify every legacy icon on the original landing page; the rebuilt landing uses Lucide for its current navigation and component examples, while reference content remains explicitly scoped. Runtime accessible-name and target-size evidence covers this bounded component reference.