Icons are one of the main media objects you can use in Ascension. The theme offers a couple of customization options that will make working with icons a breeze.

An icon can be any kind of image you want, in any kind of format. And you would load that image with an img tag, just like you would any image. The icons in Ascension have a solid border around them that can be applied by using the class of .icon.

Code	Preview
<div class="icon"> <img src="assets/img/icons/icon-brush.svg"alt="Icon"> </div> <!-- end .icon -->

You can easily transform such an icon into a button link by wrapping that image in an anchor tag, like in the example below. Alternatively, you can use the class of .ap-button-icon to add some opacity and transitions.

Code	Preview
<a href="#" class="ap-button-icon icon"> <img src="assets/img/icons/icon-brush.svg"alt="Icon"> </a>

Here are the available helper classes that can be used with icons:

Class	Description	Code & preview
small	Reduces the icon size from 4rem to 3.5rem.	<div class="icon small"> <img src="assets/img/icons/icon-brush.svg"alt="Icon"> </div> <!-- end .icon -->
large	Increases the icon size from 4rem to 6rem.	<div class="icon large"> <img src="assets/img/icons/icon-brush.svg"alt="Icon"> </div> <!-- end .icon -->