Dynamic Icons

Dynamic Icons

A set of delightful animated icons

Ellie

Preview

No content has been added for this component.

No content has been added for this component.

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

Overview of CSS Classes

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

Vertical bar for equalizer icon

Restrict.slds-icon-eq div
Selector.slds-icon-score
Summary

Initializes score icon

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

Restrictspan
VariantTrue
Selector.slds-icon-trend
Summary

Initializes trend icon

Restrictspan
VariantTrue
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-waffle_container
Summary

Containing actionable element that holds the waffle icon

Restrictbutton
VariantTrue
Selector.slds-icon-waffle
Summary

Element container circles for the waffle icon

Restrict.slds-icon-waffle_container