Icon component structure
I’ve created a few icon master components and they each are available in two sizes.
But they’re setup in a way that when I edit the larger version, adding new SVG’s to it for example, it automatically cascades to the smaller version.
Because the small versions are an instance of the larger icon master components, simply placed inside a smaller container.
This also means I can swap any sized icon for another, within buttons and field components etc. Because they all have the same bounds. 24px by 24px.
Selected Work