TLDR Design · MISCELLANEOUS

MANAGING ICON COMPONENT SIZES

alicepackarddesign.com8 min read

Summary from the TLDR Design newsletter

Design systems commonly restrict icon sizes using two main approaches: a size-variant property on each icon component, or a size-variant property on an icon wrapper with instance swapping to select glyphs. Using separate components for each size creates overwhelming clutter in the asset panel, while variable modes offer sophisticated control but add complexity. Both the wrapper and individual component approaches have trade-offs between consumer experience and ease of librarian management.