Component Blueprints

Dynamic Icons

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>

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>

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>

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>

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">

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

Overview of CSS Classes#

Selector.slds-icon-ellie
Summary
Supportdev-ready
Restrictspan
VariantTrue
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
Supportdev-ready
Restrictdiv
VariantTrue
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

Supportprototype
Restrictbutton, a
VariantTrue
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

Supportdev-ready
Restrictspan
VariantTrue
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

Supportdev-ready
Restrictspan
VariantTrue
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

Supportdev-ready
Restrictspan
VariantTrue
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

Supportdev-ready
Restrictspan
VariantTrue
Selector.slds-is-animated
Summary

Add when you wish to animate the dots

Restrict.slds-icon-typing
ModifierTrue
Selector.slds-is-paused
Summary

Add when you wish to pause the dots animation

Restrict.slds-icon-typing
ModifierTrue
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

Supportdev-ready
Restrictbutton
VariantTrue
Selector.slds-icon-waffle
Summary

Element container circles for the waffle icon

Restrict.slds-icon-waffle_container > span

Dynamic Icons Release Notes