Icons
Gravity CSS uses SVG icons for their improved accessibility and vector support. There are two ways you can add an icon to your project, with multiple sizes.
Icon Sprite​
Before you can use the icon sprite: You need to make sure its loaded in your project. For more information on installing the icon sprite, please visit our installation guide
Small Icons​
Small icons are defined at a size of 18px. To add a small icon find an icon below from our library.
- After you choose an icon from the icon library, add the code below replacing
#iconName-18with the name of the icon followed by the size. - On the
<svg>element add a class of.icon-18.
<svg focusable="false" class="icon-18" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconName-18"></use>
</svg>
Large Icons​
Large icons are defined at a size of 24px. To add a large icon find an icon below from our library.
- After you choose an icon from the icon library, add the code below replacing
#iconName-24with the name of the icon followed by the size. - On the
<svg>element add a class of.icon-24.
<svg focusable="false" class="icon-24" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconName-24"></use>
</svg>
Downloading individual icons​
If you chose not to use our preferred method of SVG delivery via SVG sprite, you can download any icon individually. To do so, visit the website, select the icon you want, and follow the download instructions.
Icon colors​
To change the color of the icon, you can use one of our color classes.
<svg focusable="false" class="icon-24 gr-condition-one" aria-hidden="true">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#close-24"></use>
</svg>