See notes for more options and IE10 compatibility workarounds

Inline SVGs are the way to go, as they allow you to use Volta's color classes to color the icon. ## Classes and sizes The class `.Vlt-icon` simply gives the SVG a size of 24x24px (which is the standard for our icons, you'll rarely see them in a different size) and adds a `display: inline-block` and `vertical-align: middle` for convenience. You can use the following classes for other common sizes: ```html 24px 16px 20px 32px 40px 48px ``` ## IE support As IE 9 to 11 does not support <use>, you have two options. Both allow you to keep the functionality of inline SVGs like changing colour etc. The quick one is to add `svgxuse.min.js` (part of our downloadable pack) to your page, which will implement a workaround just in those browsers that need it: ```html ``` OR if you're using webpack or similar, or you can't use vanilla JS, just inject `volta-icons.svg` at the top of your `body` and hide it, then you can reference the icons just by their ID ```html ``` ## Reference table |Class | Behaviour| |---|---| |.Vlt-icon | Gives an icon 24x24px size, `display: inline-block` and `vertical-align: middle` | |.Vlt-icon--smaller | Modifier that makes it 16x16px. Not suitable for all icons (some are too detailed to look nice in this size) | |.Vlt-icon--small | Modifier that makes it 20x20px. Not suitable for all icons (some are too detailed to look nice in this size) | |.Vlt-icon--large | Modifier that makes it 32x32px | |.Vlt-icon--larger | Modifier that makes it 40x40px | |.Vlt-icon--largest | Modifier that makes it 48x48px |