Options
Components such as Text, Heading, Input, Select, Button, Tag and Notice - do not require use of
ds-icon, and have specific classes for applying icons.
Basic usage
For a full list of published icon classes, refer to the examples on the Icons page.
<i class="ds-icon --icon-online-solid"></i>Component color
All Icon options support component color classes.
<i class="ds-icon --icon-calendar-dates --color-celeste"></i>
<i class="ds-icon --icon-calendar-dates --large --color-orange-mid"></i>Visual states
Icon adheres to the 4x preset visual states - alert, warning, success and info.
<i class="ds-icon --icon-user --alert"></i>
<i class="ds-icon --icon-user --warning"></i>
<i class="ds-icon --icon-user --success"></i>
<i class="ds-icon --icon-user --info"></i>Size
When using ds-icon inside ds-text or ds-heading if you don’t specify a specific size, the icon will automatically be scaled to suit the ds-text or ds-heading parent element.
Components such as Text, Heading, Input, Select, Button, Tag and Notice - do not require use of
ds-icon, and have specific classes for applying icons.
You can specify a specific icon size using the following classes:
<div><i class="ds-icon --icon-user --xxtiny"></i> ds-icon --xxtiny</div>
<div><i class="ds-icon --icon-user --xtiny"></i> ds-icon --xtiny</div>
<div><i class="ds-icon --icon-user --tiny"></i> ds-icon --tiny</div>
<div><i class="ds-icon --icon-user --xxsmall"></i> ds-icon --xxsmall</div>
<div><i class="ds-icon --icon-user --xsmall"></i> ds-icon --xsmall</div>
<div><i class="ds-icon --icon-user --small"></i> ds-icon --small</div>
<div><i class="ds-icon --icon-user --medium"></i> ds-icon --medium</div>
<div><i class="ds-icon --icon-user --large"></i> ds-icon --large</div>
<div><i class="ds-icon --icon-user --xlarge"></i> ds-icon --xlarge</div>
<div><i class="ds-icon --icon-user --xxlarge"></i> ds-icon --xxlarge</div>
<div><i class="ds-icon --icon-user --huge"></i> ds-icon --huge</div>
<div><i class="ds-icon --icon-user --xhuge"></i> ds-icon --xhuge</div>
<div><i class="ds-icon --icon-user --xxhuge"></i> ds-icon --xxhuge</div>
<div><i class="ds-icon --icon-user --massive"></i> ds-icon --massive</div>
<div><i class="ds-icon --icon-user --xmassive"></i> ds-icon --xmassive</div>
<div><i class="ds-icon --icon-user --xxmassive"></i> ds-icon --xxmassive</div>Animation
Animation states for icons should only be used sparingly to indicate temporary states (such as sending/receiving data or waiting for a server side process to complete).