Iconography in Design Systems

Icon size is defined by the outer frame, such as 16, 24, or 32 pixels. The frame sets clear boundaries for drawing and keeps proportions predictable across the entire icon set. Using fixed frame sizes also helps designers place icons accurately in layouts without adjusting their dimensions manually.

Inside the frame, the grid guides how shapes are positioned. The grid separates the live drawing area from the trim area, which provides a bit of space around the icon so shapes do not feel cramped. Smaller frames rely on tighter trim and simpler forms, while larger frames allow more room for detail. Pixel snapping supports this structure by keeping points aligned to whole pixels, which helps icons render sharply.

Smaller frames have tighter trim and thinner strokes, while larger frames increase both to keep the visual weight balanced. For example, a 16 pixel icon often uses a 1 pixel stroke, while a 24 pixel icon uses a 1.5 pixel stroke to stay clear at its scale. Larger icons may increase to 2 or 3 pixel strokes to maintain the same visual weight. Treating each size as its own design task avoids distortions that appear when icons are simply scaled up or down.^[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.

Clarity matters more than novelty. When icons rely on uncommon or ambiguous symbols, users may hesitate or misunderstand the action. Selecting metaphors that match common patterns across the web helps keep the interface predictable. This is especially important in dense layouts where users rely on quick visual scanning rather than reading labels.

Using universal metaphors also supports consistency within the icon set itself. When every icon follows the same visual language and represents its concept with a clear, simple form, the system becomes easier to learn and more comfortable to use.^[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.

Some systems support more than one icon style, such as outlined, filled, or duo-tone versions. Each variant serves a different purpose. Outlined icons often work well for default states because they feel lighter, while filled icons can highlight selected states or emphasize key actions. Keeping each variant purposeful prevents unnecessary visual noise.

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. The first step is to flatten the final drawing into one clean vector layer. Flattening removes hidden paths and stroke effects that may cause problems later. It also gives the icon a predictable internal structure that matches the rest of the set.

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.

Placing icons on the same baseline as the text helps both elements feel connected. Center alignment inside buttons or compact layout elements also works well when the component controls spacing. The goal is to avoid situations where the icon floats higher or lower than the text, which makes the interface appear uneven.

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.