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.

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