Dynamic Icons

dynamic-icons

.slds-icon-ellie, .slds-icon-score, .slds-icon-eq, .slds-icon-strength, .slds-icon-trend, .slds-icon-waffle_container, .slds-icon-help, .slds-icon-typing — A set of delightful animated icons

ellie

.slds-icon-ellie

.slds-is-animated

.slds-is-animated — Add .slds-is-animated to the SVG to enhance the icon with an animation.

.slds-is-paused

.slds-is-paused — Add .slds-is-paused to the SVG to pause the icon with an animation.

eq

.slds-icon-eq

.slds-is-animated

.slds-is-animated — Turn animation on for animated icon

.slds-icon-eq__bar

.slds-icon-eq__bar — Vertical bar for equalizer icon

global-action-help

.slds-icon-help — Hover and click animations for help icon

.slds-icon-help_hover

.slds-icon-help_hover — Modifies hover effect of global help icon

.slds-icon-help_focus

.slds-icon-help_focus — Modifies focus effect of global help icon

score

.slds-icon-score — Initializes score icon

.slds-icon-score__positive

.slds-icon-score__positive — Positive score icon

.slds-icon-score__negative

.slds-icon-score__negative — Negative score icon

strength

.slds-icon-strength — Initializes strength icon

.slds-is-animated

.slds-is-animated — Add .slds-is-animated to the SVG to enhance the icon with an animation.

.slds-is-paused

.slds-is-paused — Add .slds-is-paused to the SVG to pause the icon with an animation.

trend

.slds-icon-trend — Initializes trend icon

.slds-is-animated

.slds-is-animated — Add .slds-is-animated to the SVG to enhance the icon with an animation.

.slds-is-paused

.slds-is-paused — Add .slds-is-paused to the SVG to pause the icon with an animation.

.slds-icon-trend__arrow

.slds-icon-trend__arrow — Arrow element inside of trend icon

.slds-icon-trend__circle

.slds-icon-trend__circle — Circle element inside of trend icon

typing

.slds-icon-typing — Initializes typing icon

.slds-is-animated

.slds-is-animated — Add when you wish to animate the dots

.slds-is-paused

.slds-is-paused — Add when you wish to pause the dots animation

.slds-icon-typing__dot

.slds-icon-typing__dot — Dots within the typing icon

waffle

.slds-icon-waffle_container — Containing actionable element that holds the waffle icon

.slds-icon-waffle

.slds-icon-waffle — Element container circles for the waffle icon