Options
Components such as Text 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
<p class="ds-text"><i class="ds-icon --icon-user --tiny"></i> Tiny</p>
<p class="ds-text"><i class="ds-icon --icon-user --small"></i> Small</p>
<p class="ds-text"><i class="ds-icon --icon-user --medium"></i> Medium</p>
<p class="ds-text"><i class="ds-icon --icon-user"></i> Default</p>
<p class="ds-text"><i class="ds-icon --icon-user --large"></i> Large</p>
<p class="ds-text"><i class="ds-icon --icon-user --xlarge"></i> XLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --xxlarge"></i> XXLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --xxxlarge"></i> XXXLarge</p>
<p class="ds-text"><i class="ds-icon --icon-user --massive"></i> Massive</p>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).