<spanclass="slds-icon-ellie slds-is-animated"title="Description of the icon"><svgviewBox="0 0 280 14"aria-hidden="true"><circlecx="7"cy="7"r="4"></circle><circlecx="7"cy="7"r="3"></circle>
<spanclass="slds-icon-ellie slds-is-animated slds-is-paused"title="Description of the icon"><svgviewBox="0 0 280 14"aria-hidden="true"><circlecx="7"cy="7"r="4"></circle><circlecx="7"cy="7"r="3"></circle>
<spanclass="slds-icon-ellie"title="Description of the icon"><svgviewBox="0 0 280 14"aria-hidden="true"><circlecx="7"cy="7"r="4"></circle><circlecx="7"cy="7"r="3"></circle>
<divclass="slds-icon-eq slds-is-animated"title="Description of the icon when needed"><divclass="slds-icon-eq__bar"></div><divclass="slds-icon-eq__bar"></div><divclass="slds-icon-eq__bar"></div>
<spandata-slds-state="positive"class="slds-icon-score"title="Description of the icon when needed"><svgviewBox="0 0 5 5"class="slds-icon-score__positive"aria-hidden="true"><circlecx="50%"cy="50%"r="1.875"></circle></svg>
<spandata-slds-state="positive"class="slds-icon-score"title="Description of the icon when needed"><svgviewBox="0 0 5 5"class="slds-icon-score__positive"aria-hidden="true"><circlecx="50%"cy="50%"r="1.875"></circle></svg>
<spandata-slds-state="negative"class="slds-icon-score"title="Description of the icon when needed"><svgviewBox="0 0 5 5"class="slds-icon-score__positive"aria-hidden="true"><circlecx="50%"cy="50%"r="1.875"></circle></svg>
<spandata-slds-strength="0"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spandata-slds-strength="1"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spandata-slds-strength="2"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spandata-slds-strength="3"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spandata-slds-strength="-1"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spandata-slds-strength="-2"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spandata-slds-strength="-3"title="Description of the icon when needed"class="slds-icon-strength"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spanclass="slds-icon-strength slds-is-animated"data-slds-strength="3"title="Description of the icon when needed"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spanclass="slds-icon-strength slds-is-animated"data-slds-strength="-3"title="Description of the icon when needed"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spanclass="slds-icon-strength slds-is-animated slds-is-paused"data-slds-strength="3"title="Description of the icon when needed"><svgviewBox="0 0 27 7"aria-hidden="true"><circler="3.025"cx="3.5"cy="3.5"></circle><circler="3.025"cx="13.5"cy="3.5"></circle>
<spanclass="slds-icon-typing slds-is-animated"title="User is typing"><spanclass="slds-icon-typing__dot"></span><spanclass="slds-icon-typing__dot"></span><spanclass="slds-icon-typing__dot"></span>
<spanclass="slds-icon-typing slds-is-animated slds-is-paused"title="User is typing"><spanclass="slds-icon-typing__dot"></span><spanclass="slds-icon-typing__dot"></span><spanclass="slds-icon-typing__dot"></span>
<spanclass="slds-icon-typing"title="User is typing"><spanclass="slds-icon-typing__dot"></span><spanclass="slds-icon-typing__dot"></span><spanclass="slds-icon-typing__dot"></span>
<buttonclass="slds-button slds-icon-waffle_container"title="Description of the icon when needed"><spanclass="slds-icon-waffle"><spanclass="slds-r1"></span><spanclass="slds-r2"></span>
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-icon-ellie
Summary
Support
dev-ready
Restrict
span
Variant
True
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
Support
dev-ready
Restrict
div
Variant
True
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
Support
prototype
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-icon-score
Summary
Initializes score icon
Support
dev-ready
Restrict
span
Variant
True
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
Support
dev-ready
Restrict
span
Variant
True
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
Support
dev-ready
Restrict
span
Variant
True
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
Support
dev-ready
Restrict
span
Variant
True
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-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
Support
dev-ready
Restrict
button
Variant
True
Selector
.slds-icon-waffle
Summary
Element container circles for the waffle icon
Restrict
.slds-icon-waffle_container > span
Dynamic Icons Release Notes
Cookie Consent Manager
General Information
General Information
We use three kinds of cookies on our websites: required, functional, and advertising. You can choose whether functional and advertising cookies apply. Click on the different cookie categories to find out more about each category and to change the default settings.
Privacy Statement
Required Cookies
Required Cookies
Always Active
Required cookies are necessary for basic website functionality. Some examples include: session cookies needed to transmit the website, authentication cookies, and security cookies.
Functional cookies enhance functions, performance, and services on the website. Some examples include: cookies used to analyze site traffic, cookies used for market research, and cookies used to display advertising that is not directed to a particular individual.
Advertising cookies track activity across websites in order to understand a viewer’s interests, and direct them specific marketing. Some examples include: cookies used for remarketing, or interest-based advertising.