Mini-Pattern: Scaling Vector Icons to Small Sizes

Given a vector-based icon system, scale the icon's size and the icon's stroke weight independently for optimal display at both large and small sizes.


Graphical user interfaces with vector-based icons, in particular those which may need display at varying sizes.


In modern icon GUIs with scalable icons, the icons are drawn large and then scaled down as needed. This works well within a certain range. When you get down to very small sizes, however, some icons don't translate well.

Consider the following icons:

Icon Diagram

Looking at the left column, the top image looks fine even though the icon is mostly a single color. Despite the thin lines, it works because the icon is large enough. As the size decreases, however, lines and the fill become hard to distinguish -- the lines simply aren't strong enough to compensate for the mostly single-color fill.

On the right column we start with a bold stroke weight on the lines. On the large image they're too strong -- of course that's my subjective call -- but as the size decreases the icon looks very nice. The lines remain bold enough for visual separation.

Let's say the top-left and bottom-right images are "best." The only factors changing are overall size and the stroke weight of the lines. Rather than scaling them together (as usually happens), with vector icons we can scale each factor independently. Thus our scaling algorithm would produce these images for each size:

Icon Diagram

In this example I have exaggerated the optimal stroke-to-size ratio. For real implementations I would suggest a more subtle ratio.


I don't provide an implementation here, as this idea is general enough to work with any vector graphics system. (The implementation would be obvious to one familiar with vector graphics.)