Component Blueprints
Dynamic Icons
- HTML/CSS:In Progress (7 of 8 variants)
- Layout:Desktop Only
Sections
A set of delightful animated icons
Text alternative when needed
Ellie#
Text alternative
<span class="slds-icon-ellie slds-is-animated" title="Description of the icon">
<svg viewBox="0 0 280 14" aria-hidden="true">
<circle cx="7" cy="7" r="4"></circle>
<circle cx="7" cy="7" r="3"></circle>
<circle cx="21" cy="7" r="4"></circle>
<circle cx="21" cy="7" r="3"></circle>
<circle cx="35" cy="7" r="4"></circle>
<circle cx="35" cy="7" r="3"></circle>
<circle cx="49" cy="7" r="4"></circle>
<circle cx="49" cy="7" r="3"></circle>
<circle cx="63" cy="7" r="4"></circle>
<circle cx="63" cy="7" r="3"></circle>
<circle cx="77" cy="7" r="4"></circle>
<circle cx="77" cy="7" r="3"></circle>
<circle cx="91" cy="7" r="4"></circle>
<circle cx="91" cy="7" r="3"></circle>
<circle cx="105" cy="7" r="4"></circle>
<circle cx="105" cy="7" r="3"></circle>
<circle cx="119" cy="7" r="4"></circle>
<circle cx="119" cy="7" r="3"></circle>
<circle cx="133" cy="7" r="4"></circle>
<circle cx="133" cy="7" r="3"></circle>
<circle cx="147" cy="7" r="4"></circle>
<circle cx="147" cy="7" r="3"></circle>
<circle cx="161" cy="7" r="4"></circle>
<circle cx="161" cy="7" r="3"></circle>
<circle cx="175" cy="7" r="4"></circle>
<circle cx="175" cy="7" r="3"></circle>
<circle cx="189" cy="7" r="4"></circle>
<circle cx="189" cy="7" r="3"></circle>
<circle cx="203" cy="7" r="4"></circle>
<circle cx="203" cy="7" r="3"></circle>
<circle cx="217" cy="7" r="4"></circle>
<circle cx="217" cy="7" r="3"></circle>
<circle cx="231" cy="7" r="4"></circle>
<circle cx="231" cy="7" r="3"></circle>
<circle cx="245" cy="7" r="4"></circle>
<circle cx="245" cy="7" r="3"></circle>
<circle cx="259" cy="7" r="4"></circle>
<circle cx="259" cy="7" r="3"></circle>
<circle cx="273" cy="7" r="4"></circle>
<circle cx="273" cy="7" r="3"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Paused#
Text alternative
<span class="slds-icon-ellie slds-is-animated slds-is-paused" title="Description of the icon">
<svg viewBox="0 0 280 14" aria-hidden="true">
<circle cx="7" cy="7" r="4"></circle>
<circle cx="7" cy="7" r="3"></circle>
<circle cx="21" cy="7" r="4"></circle>
<circle cx="21" cy="7" r="3"></circle>
<circle cx="35" cy="7" r="4"></circle>
<circle cx="35" cy="7" r="3"></circle>
<circle cx="49" cy="7" r="4"></circle>
<circle cx="49" cy="7" r="3"></circle>
<circle cx="63" cy="7" r="4"></circle>
<circle cx="63" cy="7" r="3"></circle>
<circle cx="77" cy="7" r="4"></circle>
<circle cx="77" cy="7" r="3"></circle>
<circle cx="91" cy="7" r="4"></circle>
<circle cx="91" cy="7" r="3"></circle>
<circle cx="105" cy="7" r="4"></circle>
<circle cx="105" cy="7" r="3"></circle>
<circle cx="119" cy="7" r="4"></circle>
<circle cx="119" cy="7" r="3"></circle>
<circle cx="133" cy="7" r="4"></circle>
<circle cx="133" cy="7" r="3"></circle>
<circle cx="147" cy="7" r="4"></circle>
<circle cx="147" cy="7" r="3"></circle>
<circle cx="161" cy="7" r="4"></circle>
<circle cx="161" cy="7" r="3"></circle>
<circle cx="175" cy="7" r="4"></circle>
<circle cx="175" cy="7" r="3"></circle>
<circle cx="189" cy="7" r="4"></circle>
<circle cx="189" cy="7" r="3"></circle>
<circle cx="203" cy="7" r="4"></circle>
<circle cx="203" cy="7" r="3"></circle>
<circle cx="217" cy="7" r="4"></circle>
<circle cx="217" cy="7" r="3"></circle>
<circle cx="231" cy="7" r="4"></circle>
<circle cx="231" cy="7" r="3"></circle>
<circle cx="245" cy="7" r="4"></circle>
<circle cx="245" cy="7" r="3"></circle>
<circle cx="259" cy="7" r="4"></circle>
<circle cx="259" cy="7" r="3"></circle>
<circle cx="273" cy="7" r="4"></circle>
<circle cx="273" cy="7" r="3"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Static#
Text alternative
<span class="slds-icon-ellie" title="Description of the icon">
<svg viewBox="0 0 280 14" aria-hidden="true">
<circle cx="7" cy="7" r="4"></circle>
<circle cx="7" cy="7" r="3"></circle>
<circle cx="21" cy="7" r="4"></circle>
<circle cx="21" cy="7" r="3"></circle>
<circle cx="35" cy="7" r="4"></circle>
<circle cx="35" cy="7" r="3"></circle>
<circle cx="49" cy="7" r="4"></circle>
<circle cx="49" cy="7" r="3"></circle>
<circle cx="63" cy="7" r="4"></circle>
<circle cx="63" cy="7" r="3"></circle>
<circle cx="77" cy="7" r="4"></circle>
<circle cx="77" cy="7" r="3"></circle>
<circle cx="91" cy="7" r="4"></circle>
<circle cx="91" cy="7" r="3"></circle>
<circle cx="105" cy="7" r="4"></circle>
<circle cx="105" cy="7" r="3"></circle>
<circle cx="119" cy="7" r="4"></circle>
<circle cx="119" cy="7" r="3"></circle>
<circle cx="133" cy="7" r="4"></circle>
<circle cx="133" cy="7" r="3"></circle>
<circle cx="147" cy="7" r="4"></circle>
<circle cx="147" cy="7" r="3"></circle>
<circle cx="161" cy="7" r="4"></circle>
<circle cx="161" cy="7" r="3"></circle>
<circle cx="175" cy="7" r="4"></circle>
<circle cx="175" cy="7" r="3"></circle>
<circle cx="189" cy="7" r="4"></circle>
<circle cx="189" cy="7" r="3"></circle>
<circle cx="203" cy="7" r="4"></circle>
<circle cx="203" cy="7" r="3"></circle>
<circle cx="217" cy="7" r="4"></circle>
<circle cx="217" cy="7" r="3"></circle>
<circle cx="231" cy="7" r="4"></circle>
<circle cx="231" cy="7" r="3"></circle>
<circle cx="245" cy="7" r="4"></circle>
<circle cx="245" cy="7" r="3"></circle>
<circle cx="259" cy="7" r="4"></circle>
<circle cx="259" cy="7" r="3"></circle>
<circle cx="273" cy="7" r="4"></circle>
<circle cx="273" cy="7" r="3"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Eq#
Text alternative when needed
<div class="slds-icon-eq slds-is-animated" title="Description of the icon when needed">
<div class="slds-icon-eq__bar"></div>
<div class="slds-icon-eq__bar"></div>
<div class="slds-icon-eq__bar"></div>
<span class="slds-assistive-text">Text alternative when needed</span>
</div>Global Action Help#
<button class="slds-button slds-button_icon slds-icon-help">
<svg class="slds-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -12 78.5 110" aria-labelledby="title" role="presentation">
<defs>
<mask id="questionMark" x="0" y="0" width="78.5" height="110">
<path d="M46.8,70.4H37a2.7,2.7,0,0,1-2.7-2.7V64.8A19.6,19.6,0,0,1,47.4,46.4a14.6,14.6,0,0,0,6.2-4.1c9.8-11.7.8-25.8-10.9-26.2a15.7,15.7,0,0,0-11.5,4.4,13.7,13.7,0,0,0-4.5,8.6,2.8,2.8,0,0,1-2.9,2.1H14a2.8,2.8,0,0,1-2.9-3.1A31.8,31.8,0,0,1,20.5,8.8,32,32,0,0,1,43.3,0a31.3,31.3,0,0,1,9.6,60.7A4.4,4.4,0,0,0,50,64.6v2.9a3,3,0,0,1-3.1,2.9Zm3.1,20.5a3,3,0,0,1-2.9,3H37.2A3,3,0,0,1,34.3,91V81.2a3,3,0,0,1,2.9-2.9H47a3,3,0,0,1,2.9,2.9Z"
transform="translate(-2.5 0)" fill="#aab4be"></path>
</mask>
</defs>
<title id="title">help</title>
<g>
<circle cy="45" cx="45" r="60"></circle>
<circle class="slds-icon-help_hover" cy="45" cx="45" r="60"></circle>
<circle class="slds-icon-help_focus" cy="45" cx="45" r="60"></circle>
</g>
</svg>
<span class="slds-assistive-text">help</span>
</button>Score#
Text alternative when needed
<span data-slds-state="positive" class="slds-icon-score" title="Description of the icon when needed">
<svg viewBox="0 0 5 5" class="slds-icon-score__positive" aria-hidden="true">
<circle cx="50%" cy="50%" r="1.875"></circle>
</svg>
<svg viewBox="0 0 5 5" class="slds-icon-score__negative" aria-hidden="true">
<circle cx="50%" cy="50%" r="1.875"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Positive#
Text alternative when needed
<span data-slds-state="positive" class="slds-icon-score" title="Description of the icon when needed">
<svg viewBox="0 0 5 5" class="slds-icon-score__positive" aria-hidden="true">
<circle cx="50%" cy="50%" r="1.875"></circle>
</svg>
<svg viewBox="0 0 5 5" class="slds-icon-score__negative" aria-hidden="true">
<circle cx="50%" cy="50%" r="1.875"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Negative#
Text alternative when needed
<span data-slds-state="negative" class="slds-icon-score" title="Description of the icon when needed">
<svg viewBox="0 0 5 5" class="slds-icon-score__positive" aria-hidden="true">
<circle cx="50%" cy="50%" r="1.875"></circle>
</svg>
<svg viewBox="0 0 5 5" class="slds-icon-score__negative" aria-hidden="true">
<circle cx="50%" cy="50%" r="1.875"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength#
Text alternative when needed
<span data-slds-strength="0" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength: 1#
Text alternative when needed
<span data-slds-strength="1" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength: 2#
Text alternative when needed
<span data-slds-strength="2" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength: 3#
Text alternative when needed
<span data-slds-strength="3" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength: -1#
Text alternative when needed
<span data-slds-strength="-1" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength: -2#
Text alternative when needed
<span data-slds-strength="-2" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Strength: -3#
Text alternative when needed
<span data-slds-strength="-3" title="Description of the icon when needed" class="slds-icon-strength">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Animated on load#
Text alternative when needed
<span class="slds-icon-strength slds-is-animated" data-slds-strength="3" title="Description of the icon when needed">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Animated on load (negative)#
Text alternative when needed
<span class="slds-icon-strength slds-is-animated" data-slds-strength="-3" title="Description of the icon when needed">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Paused#
Text alternative when needed
<span class="slds-icon-strength slds-is-animated slds-is-paused" data-slds-strength="3" title="Description of the icon when needed">
<svg viewBox="0 0 27 7" aria-hidden="true">
<circle r="3.025" cx="3.5" cy="3.5"></circle>
<circle r="3.025" cx="13.5" cy="3.5"></circle>
<circle r="3.025" cx="23.5" cy="3.5"></circle>
</svg>
<span class="slds-assistive-text">Text alternative when needed</span>
</span>Trend#
Text alternative
<span data-slds-trend="neutral" class="slds-icon-trend slds-is-animated" title="Description of the icon">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5"></path>
<circle class="slds-icon-trend__circle" cy="8" cx="8" r="7.375" transform="rotate(-28 8 8) scale(-1 1) translate(-16 0)"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Down#
Text alternative
<span data-slds-trend="down" class="slds-icon-trend slds-is-animated" title="Description of the icon">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5"></path>
<circle class="slds-icon-trend__circle" cy="8" cx="8" r="7.375" transform="rotate(-28 8 8) scale(-1 1) translate(-16 0)"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Up#
Text alternative
<span data-slds-trend="up" class="slds-icon-trend slds-is-animated" title="Description of the icon">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5"></path>
<circle class="slds-icon-trend__circle" cy="8" cx="8" r="7.375" transform="rotate(-28 8 8) scale(-1 1) translate(-16 0)"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Static (no animation)#
Text alternative
<span data-slds-trend="up" title="Description of the icon" class="slds-icon-trend">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5"></path>
<circle class="slds-icon-trend__circle" cy="8" cx="8" r="7.375" transform="rotate(-28 8 8) scale(-1 1) translate(-16 0)"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Paused#
Text alternative
<span data-slds-trend="up" class="slds-icon-trend slds-is-animated slds-is-paused" title="Description of the icon">
<svg viewBox="0 0 16 16" aria-hidden="true">
<path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5"></path>
<circle class="slds-icon-trend__circle" cy="8" cx="8" r="7.375" transform="rotate(-28 8 8) scale(-1 1) translate(-16 0)"></circle>
</svg>
<span class="slds-assistive-text">Text alternative</span>
</span>Typing#
User is typing
<span class="slds-icon-typing slds-is-animated" title="User is typing">
<span class="slds-icon-typing__dot"></span>
<span class="slds-icon-typing__dot"></span>
<span class="slds-icon-typing__dot"></span>
<span class="slds-assistive-text">User is typing</span>
</span>Paused#
User is typing
<span class="slds-icon-typing slds-is-animated slds-is-paused" title="User is typing">
<span class="slds-icon-typing__dot"></span>
<span class="slds-icon-typing__dot"></span>
<span class="slds-icon-typing__dot"></span>
<span class="slds-assistive-text">User is typing</span>
</span>Static#
User is typing
<span class="slds-icon-typing" title="User is typing">
<span class="slds-icon-typing__dot"></span>
<span class="slds-icon-typing__dot"></span>
<span class="slds-icon-typing__dot"></span>
<span class="slds-assistive-text">User is typing</span>
</span>Waffle#
<button class="slds-button slds-icon-waffle_container" title="Description of the icon when needed">
<span class="slds-icon-waffle">
<span class="slds-r1"></span>
<span class="slds-r2"></span>
<span class="slds-r3"></span>
<span class="slds-r4"></span>
<span class="slds-r5"></span>
<span class="slds-r6"></span>
<span class="slds-r7"></span>
<span class="slds-r8"></span>
<span class="slds-r9"></span>
</span>
<span class="slds-assistive-text">Open App Launcher</span>
</button>Overview of CSS Classes
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-icon-ellie |
|---|---|
| Summary | |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-is-animated |
|---|---|
| Summary | Add .slds-is-animated to the SVG to enhance the icon with an animation. |
| Restrict | .slds-icon-ellie |
| Selector | .slds-is-paused |
|---|---|
| Summary | Add .slds-is-paused to the SVG to pause the icon with an animation. |
| Restrict | .slds-icon-ellie |
| Selector | .slds-icon-eq |
|---|---|
| Summary | |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-is-animated |
|---|---|
| Summary | Turn animation on for animated icon |
| Restrict | .slds-icon-eq |
| Selector | .slds-icon-eq__bar |
|---|---|
| Summary | Vertical bar for equalizer icon |
| Restrict | .slds-icon-eq div |
| Selector | .slds-icon-help |
|---|---|
| Summary | Hover and click animations for help icon |
| Support | prototype |
| Restrict | button, a |
| Variant | True |
| Selector | .slds-icon-help_hover |
|---|---|
| Summary | Modifies hover effect of global help icon |
| Restrict | .slds-icon-help circle |
| Selector | .slds-icon-help_focus |
|---|---|
| Summary | Modifies focus effect of global help icon |
| Restrict | .slds-icon-help circle |
| Selector | .slds-icon-score |
|---|---|
| Summary | Initializes score icon |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-icon-score__positive |
|---|---|
| Summary | Positive score icon |
| Restrict | .slds-icon-score svg |
| Selector | .slds-icon-score__negative |
|---|---|
| Summary | Negative score icon |
| Restrict | .slds-icon-score svg |
| Selector | .slds-icon-strength |
|---|---|
| Summary | Initializes strength icon |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-is-animated |
|---|---|
| Summary | Add .slds-is-animated to the SVG to enhance the icon with an animation. |
| Restrict | .slds-icon-strength |
| Selector | .slds-is-paused |
|---|---|
| Summary | Add .slds-is-paused to the SVG to pause the icon with an animation. |
| Restrict | .slds-icon-strength |
| Selector | .slds-icon-trend |
|---|---|
| Summary | Initializes trend icon |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-is-animated |
|---|---|
| Summary | Add .slds-is-animated to the SVG to enhance the icon with an animation. |
| Restrict | .slds-icon-trend |
| Selector | .slds-is-paused |
|---|---|
| Summary | Add .slds-is-paused to the SVG to pause the icon with an animation. |
| Restrict | .slds-icon-trend |
| Selector | .slds-icon-trend__arrow |
|---|---|
| Summary | Arrow element inside of trend icon |
| Restrict | .slds-icon-trend path |
| Selector | .slds-icon-trend__circle |
|---|---|
| Summary | Circle element inside of trend icon |
| Restrict | .slds-icon-trend circle |
| Selector | .slds-icon-typing |
|---|---|
| Summary | Initializes typing icon |
| Support | dev-ready |
| Restrict | span |
| Variant | True |
| Selector | .slds-is-animated |
|---|---|
| Summary | Add when you wish to animate the dots |
| Restrict | .slds-icon-typing |
| Modifier | True |
| Selector | .slds-is-paused |
|---|---|
| Summary | Add when you wish to pause the dots animation |
| Restrict | .slds-icon-typing |
| Modifier | True |
| Selector | .slds-icon-typing__dot |
|---|---|
| Summary | Dots within the typing icon |
| Restrict | .slds-icon-typing span |
| Selector | .slds-icon-waffle_container |
|---|---|
| Summary | Containing actionable element that holds the waffle icon |
| Support | dev-ready |
| Restrict | button |
| Variant | True |
| Selector | .slds-icon-waffle |
|---|---|
| Summary | Element container circles for the waffle icon |
| Restrict | .slds-icon-waffle_container > span |