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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';
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>
import { Button } from 'denali-react';
import { Button } from 'denali-react';

Variables

You can use these variables to customize this component. Simply set one or multiple of these variables and recompile the SCSS.

$icon-config:

Name Type Default value Computed value
sizes:extra-small font-size 1.2rem 12px
sizes:small font-size 1.8rem 18px
sizes:medium font-size 3.6rem 36px
sizes:large font-size 4.8rem 48px