Refining the Icon library

[jameskoster]

Without clear, documented guidelines to follow, it's inevitable that an icon set will develop inconsistencies over time. I've noticed several issues within the current set relating to visual consistency. In isolation they are not a big deal, but combined they add up and tarnish the overall UI. Below are some key points we might like to address. Doing so would improve cohesion throughout the set, and hopefully make it easier for external contributors.

Icon Footprint Alignment

Most icon designs are around 16px, but the SVGs are 24px which results in ~4px of empty space on either side. This is just enough to result in uncanny alignment, for instance in buttons, or when icons appear above or below text on the Y axis:

There are a few instances where this is offset manually in the code using negative margins and other techniques, but clearly this is not a scalable solution.

Optical Balance

Icons of similar shapes (e.g. squares and circles) have inconsistent footprints, throwing off optical balance. Notice how some of the square icons below are 16x16, others 18x18. It's the same story with circular, portrait, landscape icons too.

Inconsistent Roundness

There’s a lack of consistency in the use of roundness throughout the set, whether it's corner radii or end-caps on lines. A consistent standard for roundness should ideally be applied across all icons.

Redundant Details

Some icons reuse details or include composite sub-symbols like "+" or "-" in their design. This approach doesn't scale very well, and it might be better to minimize redundant details for clarity and efficiency.

Pixel Grid Misalignment

Several icons have SVG points that are misaligned with the pixel grid which can lead to blurry renderings. This is most noticeable on lower resolution screens and needs adjustment for sharper results.

Mixed Fill vs. Outline Treatments

There’s an inconsistent mix of filled and outlined icon styles, making the set feel less cohesive. Sometimes this makes sense (for example there should be filled/unfilled star icons), but generally it would help to standardize the approach in one direction or the other.

Overlapping Icons

There are several examples of icons that have the same at-a-glance purpose, but have subtly different appearance:

Sometimes this may be warranted, but it might be good to evaluate and align where possible.

Exploring solutions

As a fun exercise I redrew a small selection of icons adhering to some common principles:

• Symbol footprints follow set templates that have been adjusted for visual balance; square, circle, triangle, portrait, landscape, diagonal.
• Outer shapes have 2px radius
• Inner shapes have either 1px or 0px radius
• End caps are rounded
• Outlined style
• More consistent internal spacing
• More consistent level of detail
• Strokes rather than fills for easy weight adjustment in code

Note

This is not a design proposal, some of the icons are a bit clunky—they're merely sketches that (hopefully) demonstrate how the set could be made more cohesive and easier to contribute to by virtue of some established conventions.

I appreciate that updating the entire icon set may not be feasible, and that may make this issue redundant, but I figured it was worth the discussion given there have been a few contributions lately.