Denali’s icon library offers hundreds of icons in outline and solid styles that have been carefully crafted to ensure a coherent and unified UI.


To access icons in the Denali Icon Library create an <i> or <span> tag with the .d-icon class followed by the .d-$icon-name class that corresponds to the icon you would like to use. For a list of all icon names visit Denali icons page.

<i class="d-icon d-user-profile-circle is-medium"></i>

To use an icon as a link wrap your <i> or <span> tag in an <a> tag. You can modify an icon link's appearance using the .sub action and .inverse classes.

By default icon links adopt standard link styling.

<a><i class="d-icon d-notification is-medium"></i></a>
<a class="is-secondary"><i class="d-icon d-notification is-medium"></i></a>

To adopt sub action link styling add the .is-sub class to <a> tags.

<a><span class="d-icon d-star is-sub is-medium"></span></a>
<a class="is-secondary"><span class="d-icon d-star is-sub is-medium"></span></a>


Inverse link styling can also be adopted by adding the .is-inverse class to <a> tags.

<a class="is-inverse"><span class="d-icon d-trash is-medium"></span></a>
When using an icon as a link, you are creating functional images that must have appropriate alt tags to describe the icon.

Icon sizes

Icons are available in variety of sizes. Implement these sizes by adding the .is-extrasmall, .is-small, .is-medium, or .is-large classes to <i> or <span> tags.

<i class="d-icon d-user-profile-circle is-extrasmall"></i>
<i class="d-icon d-user-profile-circle is-small"></i>
<i class="d-icon d-user-profile-circle"></i>
<i class="d-icon d-user-profile-circle is-medium"></i>
<i class="d-icon d-user-profile-circle is-large"></i>


You can use these variables to change the visual appearence when creating your own Denali themes in SCSS.

Variable Name CSS Property
$icon-size-xs font-size
$icon-size-sm font-size
$icon-size-default font-size
$icon-size-md font-size
$icon-size-lg font-size