Icon weight exploration
Purpose
Evaluate and explore alternate icon weights to get a feel for how it may, or may not positively impact the UI where we rely heavily on the use of icons.
Our current icons use a 16 × 16px grid and a 2px stroke. This exploration considers a 1.5px stroke within the same grid.
Specific goals
- Add fidelity to the icons where metaphors can fall short with minimal detail.
- Match the weight of text when considering sans-serif systems fonts at a regular weight.
- Start designing more for high-resolution displays and devices.
- Consider how icon weight impacts users with visual deficiencies.
- Consider icon weight in dark UI.
- Evaluate what other systems are doing.
Sample set
Fidelity and metaphors
Conveying a metaphor in a 16 × 16px grid is a lot to ask of those 256 pixels. While some concepts like search or visibility are easily represented, others, like weight or issues can be more difficult. While detail alone is not the remedy for all metaphor woes, it can help a great deal and provides more room for exploration.
Examples
Icon | Before | After |
---|---|---|
Weight | ||
Dashboard | ||
Folder new | ||
Rocket |
Icon and text weight
At 16px, most sans-serif system fonts at a regular weight are ~1.5px. We use 14px for most of out UI text, so the difference between icon and text weight is greater today. Our current icon weight is more like a bold font, but due to the relative size of each icon to text it can overpower the text.
So why not a 1px weight? It can simply be too light and can be problematic with an even grid — to center a 1px elements in a 16px grid it has to be on a half pixel. Alternately, you’ll find many icons that use 1px on an even grid have an extra pixel of space on one of more edge so that the pixel can be crisp, but now you have a potential alignment problem.
Resolution
In the most recent update to the icon library 2px was chosen as the stroke weight. This has historical design reasons, but also works well to have crisp pixels (other than curves or rounded corners) on any display.
Based on the devices that use these dimensions (see screensiz.es), I believe it can be assumed that they have a high enough pixel density to keep an icon with a 1.5px stroke legible, if not as crisp as its 2px counterpart.
Our stats also closely align to those from statcounter.
To counter any cases where icons are viewed on a display with less pixel density any containing shapes and most key elements have at least one edge that aligns to a whole pixel. You can see this effect more clearly when toggling the pixel preview in Figma.
Pixel preview toggle | Pixel preview toggle dark UI |
---|---|
Visual conditions
This is an area that could use more research, but anecdotal reactions to the lighter stroke icons in the UI are more favorable than the heavier icons. This could be because the thicker strokes can tend to make negative space or shape recognition more difficult.
When viewing the previous before/after table under a sample of visual conditions using the NoCoffee vision simulator the lighter icons seem to be on par, if not better than their heavier counterpart. This is highly subjective though, and would benefit from testing with actual users.
Low acuity | Cataracts | Glare |
---|---|---|
Dark UI
Because light is emitted from a display, icons (and other elements) that are light on a dark background can tend to feel like they’re glowing. The effect is similar to ink bleeding on paper, only with light on screen. When this happens an element can feel like it has a heavier weight than it really does. The effect increases with higher contrast.
A common technique for text in-browser is to use -webkit-font-smoothing: antialiased;
. Using a lighter stroke icon has a similar effect.
Normal over antialiased text | Detail | Icons |
---|---|---|
What others are doing
Everything! Seriously though techniques and approach very a lot with icon grid and mobile as factors. To that end it’s better to take a look at other condensed UIs.
- GitHub’s latest Octicons use a 1.5px stroke in a 16px grid. They also have a 24px grid with the same weight.
- The Radix icon library for Modulz uses a 1px stroke in a 15px grid.
- Atlassian uses a 2px stroke icons on a 14px grid.
- The new Bootstrap icon set is created with a 1px stroke in a 16px grid.
- Elastic uses a 1px stroke on a 16px grid.
How do we decide?
Although this can be highly subjective, I think answering the following helps come to a decision on whether to stay with the current 2px stroke or update to 1.5px.
- Does the lighter weight help or hurt users visually distinguish icons? Is the impact the same for dark UI?
- Do metaphors need more nuance and detail to better identify them in the UI?
- What feels more polished in the overall context of the UI? Is it on-brand?
- Can icons still “hold their own” when used without text?
Out of scope
Grid size: Although SVG icons are resolution-independent and scalable, the best results are achieved by designing icons specific to their intended use. We have some icons today that use a 12px grid (severity icons), and others that use a larger size (pipeline icons).
Other considerations
- Updating the SVG library would be straightforward and only require updating the SVGs in the library by overriding existing files.
- Pajamas documentation and examples would be updated to use the 1.5px stroke weight.
- Icon components in Figma can simply be updated and published with the changes propagating wherever used. The 2px versions could be deprecated and available in an archive.