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.
Using Iconic responsively
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.
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.
<img class="iconic iconic-sm" data-src="sun.svg">
<img class="iconic iconic-md" data-src="sun.svg">
<img class="iconic iconic-lg" data-src="sun.svg">
Overrides
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.
iconic-size-*
You can display your icon of choice at a different size by adding a iconic-size-[sm|md|lg] override class.
<img class="iconic iconic-sm iconic-size-lg" src="sun.svg">
Example: the small-fidelity icon shown at large size.
iconic-icon-*
Alternatively, you can override which icon to display by adding a iconic-icon-[sm|md|lg] class.
<img class="iconic iconic-lg iconic-icon-sm" data-src="sun.svg">
Again, the small-fidelity icon shown at large size, but this time starting with the large-sized container class overridden to show the small icon.
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.
<style>#my-sun {width:64px; height:64px;}</style>
<img id="my-sun" class="iconic iconic-md" data-src="svg/sun.svg">
Example: A medium icon at 64x64.
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.
<!-- Demo Box size controlled by slider -->
<div class="demo-box">
<img class="iconic iconic-fluid" data-src="svg/sun.svg">
</div>
<input type="range" class="demo-control" value="75" min="16" max="150">
Slide the controller to see iconic-fluid in action.