Icons

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.

Implementation

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>
 

Icon links

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.

Default icon links

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>
 

Sub action icon links

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

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>
 

Variables

You can use these variables in a override.css file to customize this component.