"Many design systems want to restrict the number of sizes that icons can be used at. Constraints like this are often helpful, as a closed set of sizes gives consumers confidence their designs are adhering to the system's standards. Though, not every system has this restriction."
"If you have 100 icons, and offer 3 sizes, that's 300 icons to sift through. Yes, consumers will likely search for the glyph they want by name, but unlike button hierarchies, they'll see 3 visually identical copies of the glyph they're looking for every single time."
"Two popular approaches: A size variant property on each icon component. A size variant property on an icon wrapper, with an instance swap property for selecting icon glyphs. Other setups using variable modes and separate components were considered but quickly dismissed."
Design systems often restrict icon sizes to maintain consistency and give designers confidence in adherence to standards. Two popular approaches exist: applying a size variant property directly to each icon component, or applying it to an icon wrapper component with instance swap properties for selecting glyphs. Separate components for each size (like arrow 12px, arrow 16px, arrow 20px) are inefficient, creating cluttered asset panels. With 100 icons and 3 sizes, this generates 300 components, overwhelming users despite search functionality. The wrapper approach with variants provides better organization and user experience compared to managing discrete size variants across multiple component sets.
Read at Alicepackarddesign
Unable to calculate read time
Collection
[
|
...
]