Build a coherent icon set with shared grids, stroke rules, corner language, optical sizing, naming, accessibility, documentation, and quality review.
·7 min read
Consistency comes from repeatable visual rules, not from making every symbol geometrically identical.
A consistent icon set feels like one clear visual language across every product screen and interaction. Users should be able to scan it without being distracted by a symbol that looks heavier, smaller, sharper, or more detailed than its neighbors. That coherence is not achieved by forcing every icon into identical geometry. Circles, arrows, people, documents, and abstract actions have different visual structures. A useful system combines measurable construction rules with optical judgment.
The process begins before drawing. Define where the icons will appear, the smallest rendered size, whether they are decorative or interactive, and which concepts the product actually needs. A 16-pixel toolbar family has different constraints from 48-pixel feature illustrations. Keeping those categories separate prevents decorative detail from leaking into functional controls.
Write the Icon Set Brief
List the intended contexts, base sizes, required states, color behavior, supported themes, and delivery formats. Decide whether the family is outlined, filled, duotone, or a controlled combination. Identify accessibility requirements and localization risks. Establish who approves new metaphors and where source files live. A short brief makes later reviews objective: an icon either follows the agreed system or requires a documented exception.
Create a Semantic Inventory
Collect every requested concept before drawing. Merge duplicates such as delete, trash, and remove only when they truly mean the same action. Separate objects from actions and status indicators. Note concepts that need paired states, including visible and hidden, locked and unlocked, expanded and collapsed, or saved and unsaved. This inventory exposes ambiguity early and prevents different teams from commissioning two incompatible symbols for one behavior.
Choose a Base Grid and Live Area
A shared artboard provides a coordinate system for alignment and export. Common interface grids include 16, 20, and 24 units, but the correct choice is the one that matches the product's rendered sizes. Define an inner live area so marks do not touch the artboard edge. The margin can vary optically for unusual shapes, yet a target boundary keeps most icons from drifting between cramped and undersized.
A shared grid, live area, and small set of key shapes create a repeatable starting point.
Define Stroke Rules
For outlined icons, specify a primary stroke width, cap style, join style, and treatment of intersections. Decide whether strokes align to whole or half coordinates at the base size. A numerically identical stroke can still appear heavier on compact shapes or where several lines overlap, so allow controlled optical correction. Avoid mixing rounded caps, square caps, sharp joins, and soft joins unless the semantic reason is clear.
Set Corner and Terminal Language
Corners communicate personality. A soft product may use consistent radii and rounded terminals; a technical system may prefer sharper construction. Define a small radius scale instead of improvising every curve. Check internal corners as carefully as silhouettes because tight concave spaces often become dark at small sizes. Arrowheads, line endings, and cutouts should repeat recognizable proportions across the family.
Use Key Shapes, Not Rigid Templates
Circles, squares, horizontal rectangles, and diagonals can act as calibration shapes. Draw representative icons such as search, home, user, document, settings, and arrow before expanding the library. Together they reveal how the system handles curves, density, negative space, and directional forms. Do not stretch every subject to the same bounding box. A circle usually needs slight overshoot to appear equal in height to a square, while a diagonal arrow may need different margins to feel centered.
“Geometry creates the system; optical correction makes the system look consistent.”
Control Visual Weight
Compare icons as a group at actual size. Count neither paths nor pixels as a proxy for weight. Dense symbols such as calendars and settings naturally accumulate more dark area than arrows or checkmarks. Simplify internal details, open negative spaces, and adjust scale until the family feels balanced. Blur the sheet slightly or view it from a distance; unexpected dark spots and weak icons become easier to identify.
Choose Familiar Metaphors
A visually consistent symbol can still fail if its meaning is unclear. Prefer conventions users are likely to recognize in context, and pair unfamiliar icons with text labels. Do not reuse one symbol for unrelated actions. Be cautious with culturally specific objects, directionality, mail shapes, currency, gestures, and metaphors that may not travel well. Test comprehension with representative users when an icon carries an important action or status.
Design States as One Family
Plan default, hover, active, selected, disabled, and focus presentation at the component level. The icon does not need to encode every state by changing its drawing; color, background, border, and label may communicate state more consistently. If outlined icons become filled when selected, design both versions together so the silhouette and apparent size remain stable. Do not use color alone for a critical distinction.
Build for Accessibility
Decorative icons should generally be hidden from assistive technology. An icon-only button needs an accessible name on the control, not merely a filename or vague title. Informative graphics need an alternative that conveys their purpose. Maintain sufficient contrast under the applicable accessibility criteria, preserve visible keyboard focus for controls, and make targets large enough to operate even when the visible glyph is small. Accessibility belongs to the complete component, not only the SVG.
Review icons in rows, real interface components, and multiple states rather than approving isolated enlarged drawings.
Name and Organize the Library
Use semantic, predictable names such as search, calendar, upload, and visibility-off. Avoid names based only on appearance, such as circle-three, unless the shape itself is the concept. Choose one separator and state convention. Record aliases for search, but keep one canonical asset. Version breaking metaphor changes carefully because swapping a familiar symbol can alter product meaning even when the component API stays the same.
Normalize SVG and Raster Exports
For SVG delivery, keep a consistent viewBox, remove editor metadata, resolve unintended transforms, and verify fills or strokes follow the theming contract. Optimization should not change appearance or accessibility. For PNG delivery, export exact target dimensions and inspect alpha edges against light and dark backgrounds. Never scale a small PNG upward in production. Keep generated files separate from editable masters so optimization can be repeated safely.
Review the Set in Context
Create a specimen page showing every icon at its smallest and typical sizes, on both light and dark surfaces, beside text, and inside real controls. Include dense rows so outliers are visible. Test mirrored layouts where relevant and check loading, missing-icon, and fallback behavior. Capture screenshots at standard and high-density rendering, then compare them after browser or component-library updates. Review with design and engineering together: designers catch optical inconsistency, while engineers catch viewBox, styling, naming, and bundling problems.
Document Exceptions
Some symbols need exceptions. A play triangle may sit slightly off geometric center, a circle may overshoot, and a complex brand or platform mark may not follow the house stroke. Document why the exception exists and how it should be used. Include a visual example, the affected size range, and whether the adjustment belongs in the source or consuming component. Unwritten exceptions look like mistakes and invite accidental normalization later. A changelog helps consuming teams understand replacements, deprecations, and naming migrations.
A Repeatable Quality Checklist
Confirm semantic clarity, artboard and live-area alignment, apparent scale, stroke and corner consistency, negative-space openness, small-size legibility, theme contrast, and state behavior. Check accessible naming at the component level, then validate SVG markup or raster dimensions. Compare new icons with calibration symbols before release. Ask a reviewer who did not draw the icon to identify its meaning in context; familiarity can hide ambiguity from the original designer. IconCreator's App Icon Checker and App Icon Previewer can support general visual review, although interface icon systems still need in-product component testing.
