Dynamic Icons

Dynamic Icons

A set of delightful animated icons

Ellie

Preview

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

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

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

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

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

Restrictbutton
VariantTrue
Selector.slds-icon-waffle
Summary

Element container circles for the waffle icon

Restrict.slds-icon-waffle_container > span