Dynamic Icons - Lightning Design System

A set of delightful animated icons

Ellie

Selector: The CSS class being referred to.
Summary: A description of what the class does.
Support: Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
Restrict: The selector that the class name is allowed to be used on.
Variant: The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
Modifier: A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.

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-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
Restrict	`button, a`
Variant	True

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-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-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-is-animated`
Summary	Add when you wish to animate the dots
Restrict	`.slds-icon-typing`
Modifier	True

Selector	`.slds-is-paused`
Summary	Add when you wish to pause the dots animation
Restrict	`.slds-icon-typing`
Modifier	True

Selector	`.slds-icon-waffle_container`
Summary	Containing actionable element that holds the waffle icon
Restrict	`button`
Variant	True

Selector	`.slds-icon-waffle`
Summary	Element container circles for the waffle icon
Restrict	`.slds-icon-waffle_container > span`