Shock Theme has two essential icon libraries for building elements. Altogether there are 3,348 free and open-source icons that we consider the best available on the market.

Font Awesome

Font Awesome is the Internet's icon library and toolkit, used by millions of designers, developers, and content creators.

Everything is already configured in web font mode and ready to use in Shock Theme, but if you want to understand how it works read the official documentation

Here is an example of an Font Awesome Icon:

<i class="fa-solid fa-camera icon primary">

Note that the icon and primary classes in the above example are extras to the Shock Theme. Read about the color system to learn how to color the icons.

Ionic Icon

Premium designed icons for use in web, iOS, Android, and desktop apps. Support for SVG and web font. Completely open source, MIT licensed and built by Ionic.

Unlike the Font Awesome mentioned above, the Ionic Icon is not configured as a web font and therefore the img tag is used so that the icon is displayed correctly.

Here is an example of an Ionic Icon:

<img src="assets/svg/layers-outline.svg" alt="Icon name" data-cbase-icon="32" />

The data-cbase-icon attribute is responsible for converting the image file into SVG and allowing the colors to be assigned with color system from Shock Theme.

When you find an icon in the Ionic Icon Library just use the corresponding nomenclature on the element. Note an example for the cube-sharp icon where only part of the image URL has changed:

<img src="assets/svg/cube-sharp.svg" alt="Icon name" data-cbase-icon="32" />

Optionally you can add your priority SVG files in the assets/svg folder and use the Shock Theme icon system.