Icon design is the craft of reducing an idea to a small, legible symbol that follows the same geometry, stroke and spacing rules as every other symbol in the interface. Consistency matters more than detail.
Icons sit inside the wider practice of ui design principles, where clarity, consistency and feedback guide every choice. The sections below cover meaning, grids, strokes, colour and delivery.
Start with meaning, not decoration
An icon is a visual shorthand, and a shorthand only works if the reader already knows what it stands for. Nielsen Norman Group notes that a user’s understanding of an icon is based on previous experience, and that few symbols are recognised everywhere. In its words, the icons for home, print, and the magnifying glass for search are such instances. Anything beyond that short list is ambiguous until the context explains it.
That has a practical consequence for the drawing stage. Before opening a vector editor, list the action or object the icon must represent, then test whether a familiar metaphor already exists. A floppy disk for saving or an envelope for mail works because people have met the metaphor repeatedly. An invented metaphor forces the reader to learn something new, which is rarely worth the cost in a navigation bar or toolbar.
The same source adds that text labels are necessary to communicate the meaning and reduce ambiguity, and that even a standard symbol is often safer with a label next to it. Icon-only buttons are best kept for the handful of cases where the symbol is truly established and space is tight.
Build every icon on a shared grid
A grid is the quiet structure behind a set that looks like it came from a single hand. It fixes the canvas size, the safe area where artwork may sit, and a few key shapes (a circle, a square, a tall rectangle and a wide rectangle) that act as templates so that different symbols carry a similar visual weight.
Without those templates, a circular icon looks smaller than a square one drawn to the same edges, because the eye reads area, not bounding box. Keyline shapes correct for this: circles are allowed to overshoot slightly, tall shapes sit a little narrower, and the optical size of every symbol ends up matched. Draw the shapes once on the canvas, then place each new icon over them.
Padding is part of the grid too. Keeping a consistent margin inside the canvas means icons can be swapped in code without the surrounding layout shifting. Most teams record the canvas dimensions, margin and keyline shapes in their design system so that anyone adding a symbol later starts from the same template.
Whole-unit coordinates help as well. When lines and edges fall on whole units of the grid, small renderings stay crisp, while half-unit positions tend to smear across neighbouring pixels on standard-density screens.
Choose stroke width, caps and joins deliberately
Most interface icons are either outlined or filled, and outlined sets depend on a single stroke width repeated everywhere. Mixing widths is the quickest way to make a set feel assembled from different sources. In SVG, the stroke-width attribute is a presentation attribute defining the width of the stroke applied to a shape, so the value can be set once on a group and inherited by every path inside it.
The ends and corners of strokes carry personality. The stroke-linecap attribute defines the shape used at the end of open subpaths, with butt, round and square options. The stroke-linejoin attribute defines the shape used at the corners of paths, with miter, round and bevel options among them. Round caps and round joins read as friendly and soft, while butt caps and mitered joins read as precise and technical. Pick one combination and use it for the entire set.
Corner radius works the same way. If rectangles in the set have softened corners, every rectangle should, and the radius should relate to the stroke so that inner and outer curves stay parallel. Counters (the enclosed gaps inside shapes such as a bell or a gear) need to stay open at small sizes, so thin gaps are better widened than faithfully copied from a larger drawing.
Keep outlined and filled styles separate
Many products ship both an outlined and a filled version of the same symbol, using the filled one to show a selected or active state. This works when the pair is drawn from the same skeleton: the filled version occupies the same footprint, with the same keylines, so toggling between them causes no visual jump.
Avoid mixing the styles within a single row of controls unless the difference carries meaning. A tab bar where the inactive icons are outlined and the active one is filled communicates selection clearly; a toolbar where the styles vary at random simply looks inconsistent. If detail has to be sacrificed to keep two styles aligned, sacrifice the detail.
Colour, contrast and accessibility
An icon that cannot be seen is not doing its job. The Web Content Accessibility Guidelines address this directly: the non-text contrast criterion requires user interface components and graphical objects to have a contrast ratio of at least 3:1 against adjacent color(s). The guidance defines graphical objects as parts of graphics required to understand the content, which covers an icon that carries meaning on its own.
Colour choices for icons usually follow the interface palette, so the same discipline applies as for any ui color palette: assign roles for default, hover, disabled and selected states rather than picking tints ad hoc. Disabled states are exempt from the contrast rule, but they should still be recognisable as the same symbol.
In CSS, the cleanest approach is to let the icon inherit its colour from the surrounding text. MDN explains that the currentColor keyword represents the value of an element’s color property, so an inline SVG that uses it for fill or stroke automatically follows the text colour, including in dark mode and on hover.
Prepare icons for real interfaces
Once drawn, an icon needs a clean export. Every symbol should share the same viewBox so that scaling is predictable; MDN describes how the viewBox attribute defines the position and dimension, in user space, of an SVG viewport. Strip hidden layers, convert text to outlines, expand any strokes that must not scale, and name files by what the symbol means rather than how it looks.
Accessibility markup depends on purpose. A decorative icon beside a text label should be hidden from assistive technology, while an icon-only button needs an accessible name supplied through a label on the button itself. When an icon is built from several shapes, MDN’s guidance on the img role covers how any set of content that should be consumed as a single image can be grouped and described once.
Finally, test the set in context. Place the icons at their smallest real size next to body text, on both light and dark backgrounds, and in a mockup of the actual screen. Detail that vanishes at the real size should be removed from the master drawing, not merely hidden.
A short review checklist
- Does each symbol use a metaphor the audience already knows, or does it carry a text label?
- Do all icons share the same canvas, margin and keyline shapes?
- Is stroke width, cap and join identical across the set?
- Does the optical weight of circles, squares and diagonals look even?
- Does every meaningful icon meet the non-text contrast requirement in each state?
- Are the exports named, trimmed and consistent in viewBox?
Frequently asked questions
What is the difference between an icon and an illustration?
An icon is a compact symbol meant to be read at a glance at small sizes, with minimal detail. An illustration is larger and more descriptive, and it can carry nuance and style that would be lost in a toolbar.
Should icons always have text labels?
Not always, but labels remove ambiguity. Nielsen Norman Group recommends a label alongside most icons, keeping icon-only controls for symbols that users already recognise from wide use.
Is it better to use outlined or filled icons?
Either works if the whole set follows one style. Many products use outlined icons by default and the filled variant for a selected state, provided both share the same footprint.
Why use SVG for interface icons?
SVG is resolution independent, can inherit colour from CSS and stays small, so a single file serves every screen density. The viewBox and stroke attributes also make it easy to keep a set consistent.
