To support a wide range of legibility, each Iconic icon is designed at three different sizes: small, medium and large. And yes, it was a lot of work.
The "S" in SVG means "Scalable", sure, but that doesn't mean SVG is always legible at any size. With three different fidelity levels available you'll have plenty of flexibility and control in displaying the ideal icon for your design that'll look great across a range of sizes.
Iconic includes three size-specific SVGs and an SVG multi-size stack for every icon.
SVG stack with all three sizes
The easiest and most flexible way to get started is to use the stacked version of the icon. Later, if you decide you really only need a single specific size of a given icon you can swap in the size-suffixed version to save a bit of space.
To use a certain size icon at its default dimensions add the iconic-sm, iconic-md or iconic-lg class.
You may like the look of a certain fidelity icon but want to show it at another size. We've setup a couple override classes to help you do just that.
You can display your icon of choice at a different size by adding a iconic-size-[sm|md|lg] override class.
Alternatively, you can override which icon to display by adding a iconic-icon-[sm|md|lg] class.
Using custom sizes
Although Iconic icons are designed to look great at their native sizes, being a vector format, you can display them at any size you like.
Even SVGs can sometimes look blurry at small sizes due to browser subpixel antialiasing, especially when sized or scaled to non-integer values. Iconic icons are designed on pixel-precise grids (16x16, 32x32 and 128x128) and intended to look their best at their native size or some multiple. For example, small icons look great at 16x16, 32x32, 48x48, 64x64... Medium icons look great at 32x32, 64x64, 96x96, etc.
Responsive SVG stacks
If you need even more flexibility in showing your icons across a range of size, you can use the iconic-fluid class. This will make the icon fill the full size of its containing element and automatically choose the ideal fidelity icon to display depending on how big the icon is currently being displayed.