By Best Icons Editorial ·
Build an Icon Consistency Spec Your Team Can Actually Use
An icon system starts to drift when each new feature makes its own small exceptions. One screen uses a heavier stroke, another centers artwork by eye, and a third imports a similar symbol from an unrelated family. A useful specification turns those local decisions into repeatable rules. It should be short enough to consult during real work and concrete enough to resolve the next ambiguous choice.
Build a specimen page from ordinary components
Choose a handful of components that already exist: a navigation item, a small button, an input, a table action and an explanatory card. Place the same sample family into all five. Include round, wide, tall and dense shapes. This reveals whether the family works across your product rather than only in the square tiles of a catalog.
Write down the visible drawing size and the containing slot separately. A sample navigation rule might use a 20-pixel icon inside a 24-pixel alignment slot with a documented text gap. Those numbers are an example specification, not a universal standard. Keep the specimen page beside the component library so reviewers can see what the rule means instead of interpreting a number without context.
Document visual weight and optical alignment
Equal width and height do not guarantee equal perceived size. A filled square can look heavier than an open circle inside the same box. Compare candidates in a row beside real text, then decide whether the family needs a different size variant, a consistent stroke setting or a documented local adjustment. Avoid stretching a narrow shape just to fill the slot.
Carbon's icon usage guidance describes intentional size options and alignment with typography. Lucide documents a consistent icon system with adjustable size, color and stroke. Use the selected family's own conventions as a starting point. Do not assume that applying the same stroke-width value to unrelated drawings will make their geometry, detail density and corner treatment match.
| Rule | Record in the specification | Verify in context |
|---|---|---|
| Size | Drawing size and containing slot | Smallest supported component |
| Weight | Chosen family and treatment | Simple and dense symbols together |
| Spacing | Gap between icon and label | Short and wrapped labels |
| Alignment | Centering or baseline rule | Round, tall and wide shapes |
| Exception | Reason and approved example | Whether the exception remains necessary |
From the library
Find a style that feels like your product.
Compare real icons from the library. Open a pack to search its artwork, inspect source licenses and choose an SVG or PNG export.
Give concepts stable names
Name the product concept separately from the file you imported. A component might use an internal name such as action.downloadReport while its source record retains the exact set, icon name and variant. This makes a later artwork replacement manageable without changing every product label. It also prevents the source name from becoming an accidental user-facing phrase.
Keep a small mapping for easily confused concepts: archive versus delete, share versus send, and refresh versus sync. Add the visible label and intended action to the mapping. If two teams use the same symbol for different actions, review whether the surrounding context makes that safe. Consistency means predictable meaning as well as matching line weight; a beautifully uniform set can still confuse users when its vocabulary changes between screens.
Make exceptions explicit and reversible
Sometimes the chosen family lacks an essential concept. Record the gap before importing a replacement. Compare a labeled generic symbol with a carefully selected exception; the specialized drawing is not automatically the better choice. If an exception is necessary, document its role, source and adjustments, and show it beside neighboring icons in the specimen page.
Do not edit original source files in place to make the exception look compliant. Keep the original and the project-specific version distinguishable. At a future review, the team should be able to tell whether an unusual stroke was supplied by the creator, introduced during export or intentionally changed for the product. A small exception log is more useful than an unwritten rule that only the original designer remembers.
From the library
Try color. Explore duotone.
Give an explanation a different visual treatment. Browse Fluent Color and Phosphor Duotone, then compare them at the size your readers will see.
Turn the specimen into an acceptance check
Review new icons in the specimen before adding them to production. Start with a focused family such as Lucide, Carbon or Iconoir, depending on the product's established direction. The goal is not to prevent every future change. It is to make changes visible, comparable and reversible while keeping ordinary additions inexpensive to evaluate.
- The new symbol has a documented product meaning and source identity.
- Its drawing and interaction dimensions follow separate rules.
- Its weight matches both simple and dense neighboring symbols.
- Labels remain aligned when they wrap or become longer.
- Any local adjustment is recorded and preserves the original source.
- The component remains understandable when the artwork is not visible.
