Denali CSS Docs are Moving

We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.


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 in a override.css file to customize this component.

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