Iconography in Design Systems

Icon size is defined by the outer frame, such as 16, 24, or 32 pixels. This frame sets alignment and bounding rules, making it easier to place icons consistently in layouts. However, the frame defines the technical size, not how large an icon feels visually. Different shapes can appear heavier or lighter even when they share the same frame.

Inside the frame, a grid helps position shapes and separates the live drawing area from the trim area. The trim creates breathing room so icons do not feel cramped. Not all icons should fill the frame evenly. Compact or square shapes often need more padding, while narrow or elongated shapes may extend closer to the edges. This optical balance ensures icons feel equal in size and weight, even when their shapes differ. Beginners often fill the entire frame, which can make some icons feel too heavy or visually dominant.

Smaller frames usually use tighter trim and thinner strokes, while larger frames allow more space and thicker strokes to maintain balance. For example, a 16 pixel icon often uses a 1 pixel stroke, while a 24 pixel icon may use a 1.5 pixel stroke. Larger sizes can increase further to keep visual weight consistent. Treating each size as its own design task and adjusting shapes optically rather than scaling them mechanically helps icons remain clear, balanced, and consistent across the set.^[1]

Metaphors determine how quickly users understand what an icon represents. The most reliable icons use shapes that are widely recognized across products and cultures. Familiar metaphors reduce the risk of misinterpretation and support faster decision-making. For example, arrows for navigation or a magnifying glass for search remain effective because users see them repeatedly across interfaces.

Because of this, clarity matters more than novelty. Icons built on uncommon or ambiguous metaphors often force users to stop and think, which slows interaction and increases the risk of misunderstanding. Relying on patterns that are already common across platforms helps keep interfaces predictable, especially in dense layouts where users scan quickly instead of reading carefully.

For this reason, pairing icons with text labels is strongly recommended. Labels remove ambiguity and make the intended action clear, even when an icon is unfamiliar or slightly repurposed. Together, icons and labels support faster recognition, better accessibility, and more confident decision-making.^[2]

Simplicity is essential for icons to remain clear at small sizes. Since icons often appear beside text or inside dense layouts, users must recognize them within a fraction of a second. Simple shapes help achieve this because they reduce visual noise and highlight the core metaphor instead of decorative details.

Excessive detail tends to blur or disappear when an icon is viewed at small scales. Fine lines, inner patterns, or unnecessary angles can become hard to read and may create uneven visual weight within the set. Minimizing detail keeps shapes crisp and helps icons stay legible across different screen densities.

Keeping forms simple also reinforces consistency. When all icons follow the same level of refinement, they appear more cohesive as a system. This makes it easier for users to scan interfaces and easier for teams to expand the icon set without constant stylistic adjustments.

Design systems may support more than one icon style, such as outlined, filled, or duo-tone versions. However, most design systems deliberately choose a single primary icon style, usually outlined or filled, and avoid mixing styles freely. This helps keep interfaces visually calm and predictable. When multiple styles are supported, the switch between them is intentional and usually tied to state rather than personal preference.

For example, an outlined icon may represent a default state, while the filled version indicates a selected or active state, such as a favorite, a bookmark, or visibility on and off. Used this way, variants communicate meaning instead of adding decoration.

To maintain consistency, each style must follow the same structural rules. Stroke alignment, corner treatments, trim areas, and overall proportions should match across variants. When these rules stay consistent, switching between outlined and filled versions feels intentional rather than disruptive.

Using variants responsibly also supports accessibility. Filled icons offer stronger contrast in compact spaces, while outlined versions pair well with text-heavy layouts. By defining clear usage guidelines, teams can prevent style drift and preserve a unified visual language.^[3]

Icons often appear across interfaces with different pixel densities, so they must remain sharp and readable in each context. Scaling icons manually usually creates distortion or uneven stroke weight, which weakens clarity. Creating separate, purpose-built sizes avoids this issue and keeps visual weight consistent across devices.

Different densities also affect how much detail an icon can safely contain. Smaller sizes work best with simplified shapes because thin lines or small gaps may disappear on high-density or low-density displays. Larger sizes can support slightly more detail, but they must still follow the same structural rules to remain part of the same system.

Using scalable formats such as SVG helps icons stay crisp without generating multiple raster files. These files preserve vector shapes and allow icons to adapt to different screen densities without losing sharpness. They also make it easier for teams to maintain consistent behavior across platforms.^[4]

Before an icon becomes part of the shared library, it must be prepared as a component. This ensures that every icon behaves the same way when reused, updated, or replaced.

This step should happen only after the icon has been fully reviewed and approved. Once the designer is confident that the shape, proportions, and alignment are final, the icon can be readied for production use.

At this stage, the final drawing is flattened into a single clean vector layer. Flattening removes hidden paths, effects, and strokes that could cause issues later. It also ensures the icon has a predictable internal structure that matches the rest of the set and behaves consistently when reused, updated, or replaced.

After flattening, designers apply a color token such as content primary. This token keeps the icon responsive to theme changes. Once the color is applied, the icon is placed inside a frame that matches its intended size, for example, 16 or 24 pixels. The frame becomes the outer boundary of the component. Naming the component consistently, such as icon/action/edit or icon/status/warning, helps teams browse and maintain the library.

Organizing an icon library starts with grouping icons by their purpose. Status, navigation, media, and action icons can each form their own sections in the file. This structure helps designers scan groups instead of searching through a single long list. Clear grouping also reduces duplication, since contributors can see whether an icon already exists before creating a new one.

The internal structure of each icon is crucial for keeping overrides intact when swapping icons in layouts. Figma remembers applied color tokens by looking at the name, order, and number of layers inside a component. This means every icon must use the same internal setup. For example, if the “edit” icon contains one flattened vector layer named “icon,” but the “trash” icon contains two separate paths named “outline” and “fill,” Figma treats them as different structures. When a designer swaps the edit icon for the trash icon, the color override is lost because Figma cannot match “icon” to “outline” or “fill.” A single flattened vector layer with the same name in every icon prevents this issue.

Keeping identical layer names, order, and structure across all icons prevents this problem and keeps the library stable.

Clear naming helps teams find icons quickly and reuse them consistently. A practical naming pattern describes the icon’s category, the object it represents, and the action it performs. Systems often follow a structure such as category / object / modifier. For example, learn / video / add or file / image / remove. This pattern groups related icons together and makes the library easier to scan.

Tagging adds another layer of findability. Tags capture all the different terms designers might use to locate an icon. A single icon can include tags like draw, pen, vector, or write, so any of these search terms lead to the same result. This approach aligns with how people actually search, since some think in verbs, others in nouns, and others in visual appearance. A set of well-chosen tags increases accuracy and reduces the time spent hunting through the library.

Consistent naming and tagging also prevent duplicates. When teams follow the same patterns, they avoid creating multiple icons that represent the same concept. This reduces maintenance work and keeps the visual language aligned across products.

When icons appear next to text, alignment and spacing determine how readable the interface feels. Icons should follow their default size, such as 16 or 12 pixels, so they sit comfortably within text-based components. Smaller icons help maintain visual balance because large icons can draw too much attention and disrupt the reading flow.

There is no single correct alignment approach. Some systems align icons to the text baseline, while others use optical centering, where the icon is visually centered relative to the text block rather than mathematically aligned to the baseline. Optical centering often produces more balanced results, especially when icons have irregular shapes or different visual weights. The key is consistency within the system, not strict adherence to one method.

Clear spacing between the icon and the text improves recognition. Many design systems place icons inside a container or use a spacing token so the gap stays consistent across components. This prevents icons from crowding the label or creating unexpected visual gaps. When spacing and alignment are consistent, labels remain easy to scan, and icons support meaning without overpowering it.

Accessible icons support users who rely on assistive technologies or who have difficulty interpreting visual cues. When an icon appears without a visible text label, it must include an accessible label that clearly states its purpose. This ensures that screen readers can describe the action or status instead of leaving the user guessing. If the icon already has a visible text label, the label itself serves as the accessible text, and no additional description is needed.

Legibility is another important factor. Meaningful icons must remain clear at their intended size. Outlines should stay thick enough to be visible, and shapes should avoid unnecessary complexity that may blur or disappear at small scales. Icons used for warnings or confirmation states should rely on clear metaphors that are easy to distinguish, especially when used alongside color.

Accessible color choices help users with low vision or color blindness. Icons must meet contrast requirements when placed against their background. Many systems use semantic tokens for icon color, so the icon automatically switches to a version with sufficient contrast in different themes. This reduces the chance that an icon becomes unreadable in dark or high-contrast interfaces.