dynamic-icons

A set of delightful animated icons

Text alternative when needed

Ellie

Text alternative

<span class="slds-icon-ellie slds-is-animated" title="Description of the icon">
  <svg viewBox="0 0 280 14" aria-hidden="true">
    <circle cx="7" cy="7" r="4">

Paused

Text alternative

<span class="slds-icon-ellie slds-is-animated slds-is-paused" title="Description of the icon">
  <svg viewBox="0 0 280 14" aria-hidden="true">
    <circle cx="7" cy="7" r="4">

Static

Text alternative

<span class="slds-icon-ellie" title="Description of the icon">
  <svg viewBox="0 0 280 14" aria-hidden="true">
    <circle cx="7" cy="7" r="4">

Eq

Text alternative when needed

<div class="slds-icon-eq slds-is-animated" title="Description of the icon when needed">
  <div class="slds-icon-eq__bar">
  </div>

Global Action Help

<button class="slds-button slds-button_icon slds-icon-help">
  <svg class="slds-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 -12 78.5 110" aria-labelledby="title" role="presentation">
    <defs>

Score

Text alternative when needed

<span data-slds-state="positive" class="slds-icon-score" title="Description of the icon when needed">
  <svg viewBox="0 0 5 5" class="slds-icon-score__positive" aria-hidden="true">
    <circle cx="50%" cy="50%" r="1.875">

Positive

Text alternative when needed

<span data-slds-state="positive" class="slds-icon-score" title="Description of the icon when needed">
  <svg viewBox="0 0 5 5" class="slds-icon-score__positive" aria-hidden="true">
    <circle cx="50%" cy="50%" r="1.875">

Negative

Text alternative when needed

<span data-slds-state="negative" class="slds-icon-score" title="Description of the icon when needed">
  <svg viewBox="0 0 5 5" class="slds-icon-score__positive" aria-hidden="true">
    <circle cx="50%" cy="50%" r="1.875">

Strength

Text alternative when needed

<span data-slds-strength="0" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Strength: 1

Text alternative when needed

<span data-slds-strength="1" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Strength: 2

Text alternative when needed

<span data-slds-strength="2" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Strength: 3

Text alternative when needed

<span data-slds-strength="3" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Strength: -1

Text alternative when needed

<span data-slds-strength="-1" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Strength: -2

Text alternative when needed

<span data-slds-strength="-2" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Strength: -3

Text alternative when needed

<span data-slds-strength="-3" title="Description of the icon when needed" class="slds-icon-strength">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Animated on load

Text alternative when needed

<span class="slds-icon-strength slds-is-animated" data-slds-strength="3" title="Description of the icon when needed">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Animated on load (negative)

Text alternative when needed

<span class="slds-icon-strength slds-is-animated" data-slds-strength="-3" title="Description of the icon when needed">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Paused

Text alternative when needed

<span class="slds-icon-strength slds-is-animated slds-is-paused" data-slds-strength="3" title="Description of the icon when needed">
  <svg viewBox="0 0 27 7" aria-hidden="true">
    <circle r="3.025" cx="3.5" cy="3.5">

Trend

Text alternative

<span data-slds-trend="neutral" class="slds-icon-trend slds-is-animated" title="Description of the icon">
  <svg viewBox="0 0 16 16" aria-hidden="true">
    <path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5">

Down

Text alternative

<span data-slds-trend="down" class="slds-icon-trend slds-is-animated" title="Description of the icon">
  <svg viewBox="0 0 16 16" aria-hidden="true">
    <path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5">

Up

Text alternative

<span data-slds-trend="up" class="slds-icon-trend slds-is-animated" title="Description of the icon">
  <svg viewBox="0 0 16 16" aria-hidden="true">
    <path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5">

Static (no animation)

Text alternative

<span data-slds-trend="up" title="Description of the icon" class="slds-icon-trend">
  <svg viewBox="0 0 16 16" aria-hidden="true">
    <path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5">

Paused

Text alternative

<span data-slds-trend="up" class="slds-icon-trend slds-is-animated slds-is-paused" title="Description of the icon">
  <svg viewBox="0 0 16 16" aria-hidden="true">
    <path class="slds-icon-trend__arrow" d="M.75 8H11M8 4.5L11.5 8 8 11.5">

Typing

User is typing

<span class="slds-icon-typing slds-is-animated" title="User is typing">
  <span class="slds-icon-typing__dot">
  </span>

Paused

User is typing

<span class="slds-icon-typing slds-is-animated slds-is-paused" title="User is typing">
  <span class="slds-icon-typing__dot">
  </span>

Static

User is typing

<span class="slds-icon-typing" title="User is typing">
  <span class="slds-icon-typing__dot">
  </span>

Waffle

<button class="slds-button slds-icon-waffle_container" title="Description of the icon when needed">
  <span class="slds-icon-waffle">
    <span class="slds-r1">