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 sizing
Iconic includes three size-specific SVGs and an SVG multi-size stack for every icon.
File Suffix
Fidelity
Default Dimensions
-sm
Small
16x16
-md
Medium
32x32
-lg
Large
128x128
none
SVG stack with all three sizes
128x128
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.
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.