{
  "_copyright": "Copyright (c) 2026, Salesforce, Inc., All rights reserved. For full license text, see the LICENSE.txt file",
  "$schema": "https://slds.lightningdesignsystem.com/schemas/uif-system.v1.json",
  "apiVersion": "1.0.0",
  "name": "DynamicIcons",
  "description": "A set of delightful animated icons",
  "extensions": {
    "com.salesforce-ux": {
      "genReady": false
    }
  },
  "cssSource": "./dynamicIcons.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  },
  "structure": {
    "name": "dynamicIcon",
    "restrict": [
      "span",
      "div",
      "button"
    ],
    "description": "A set of delightful animated icons",
    "variants": [
      {
        "name": "iconType",
        "description": "Mutually exclusive icon family. Each option swaps the rendered tag, BEM root class, available modifiers, and inner SVG/element recipe.",
        "options": [
          {
            "value": "ellie",
            "class": "slds-icon-ellie",
            "description": "Ellie loading icon: a row of paired circles inside a wide SVG, animated via a slide + pop.",
            "restrict": [
              "span"
            ],
            "children": [
              {
                "name": "svg",
                "restrict": [
                  "svg"
                ],
                "description": "SVG canvas containing the ellie circle pairs."
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text alternative for the icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "eq",
            "class": "slds-icon-eq",
            "description": "Equalizer icon: three vertical bars whose height scales independently when animated.",
            "restrict": [
              "div"
            ],
            "children": [
              {
                "name": "bar",
                "restrict": [
                  "div"
                ],
                "description": "Vertical bar for equalizer icon",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-icon-eq__bar"
                  }
                }
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text alternative for the icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "score",
            "class": "slds-icon-score",
            "description": "Initializes score icon",
            "restrict": [
              "span"
            ],
            "children": [
              {
                "name": "positive",
                "restrict": [
                  "svg"
                ],
                "description": "Positive score icon",
                "attributes": {
                  "static": {
                    "class": "slds-icon-score__positive"
                  }
                }
              },
              {
                "name": "negative",
                "restrict": [
                  "svg"
                ],
                "description": "Negative score icon",
                "attributes": {
                  "static": {
                    "class": "slds-icon-score__negative"
                  }
                }
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text alternative for the icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "strength",
            "class": "slds-icon-strength",
            "description": "Initializes strength icon",
            "restrict": [
              "span"
            ],
            "children": [
              {
                "name": "svg",
                "restrict": [
                  "svg"
                ],
                "description": "SVG canvas containing the three strength dots."
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text alternative for the icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "trend",
            "class": "slds-icon-trend",
            "description": "Initializes trend icon",
            "restrict": [
              "span"
            ],
            "children": [
              {
                "name": "svg",
                "restrict": [
                  "svg"
                ],
                "description": "SVG canvas containing the trend arrow and circle.",
                "children": [
                  {
                    "name": "arrow",
                    "restrict": [
                      "path"
                    ],
                    "description": "Arrow element inside of trend icon",
                    "attributes": {
                      "static": {
                        "class": "slds-icon-trend__arrow"
                      }
                    }
                  },
                  {
                    "name": "circle",
                    "restrict": [
                      "circle"
                    ],
                    "description": "Circle element inside of trend icon",
                    "attributes": {
                      "static": {
                        "class": "slds-icon-trend__circle"
                      }
                    }
                  }
                ]
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text alternative for the icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "typing",
            "class": "slds-icon-typing",
            "description": "Initializes typing icon",
            "restrict": [
              "span"
            ],
            "children": [
              {
                "name": "dot",
                "restrict": [
                  "span"
                ],
                "description": "Dots within the typing icon",
                "repeats": true,
                "attributes": {
                  "static": {
                    "class": "slds-icon-typing__dot"
                  }
                }
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden text alternative for the icon.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "waffle",
            "class": "slds-button slds-icon-waffle_container",
            "description": "Containing actionable element that holds the waffle icon",
            "restrict": [
              "button"
            ],
            "children": [
              {
                "name": "waffle",
                "restrict": [
                  "span"
                ],
                "description": "Element container circles for the waffle icon",
                "attributes": {
                  "static": {
                    "class": "slds-icon-waffle"
                  }
                },
                "children": [
                  {
                    "name": "r1",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 1 (top-start).",
                    "attributes": {
                      "static": {
                        "class": "slds-r1"
                      }
                    }
                  },
                  {
                    "name": "r2",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 2 (top-center).",
                    "attributes": {
                      "static": {
                        "class": "slds-r2"
                      }
                    }
                  },
                  {
                    "name": "r3",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 3 (top-end).",
                    "attributes": {
                      "static": {
                        "class": "slds-r3"
                      }
                    }
                  },
                  {
                    "name": "r4",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 4 (middle-start).",
                    "attributes": {
                      "static": {
                        "class": "slds-r4"
                      }
                    }
                  },
                  {
                    "name": "r5",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 5 (middle-center).",
                    "attributes": {
                      "static": {
                        "class": "slds-r5"
                      }
                    }
                  },
                  {
                    "name": "r6",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 6 (middle-end).",
                    "attributes": {
                      "static": {
                        "class": "slds-r6"
                      }
                    }
                  },
                  {
                    "name": "r7",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 7 (bottom-start).",
                    "attributes": {
                      "static": {
                        "class": "slds-r7"
                      }
                    }
                  },
                  {
                    "name": "r8",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 8 (bottom-center).",
                    "attributes": {
                      "static": {
                        "class": "slds-r8"
                      }
                    }
                  },
                  {
                    "name": "r9",
                    "restrict": [
                      "span"
                    ],
                    "description": "Waffle dot 9 (bottom-end).",
                    "attributes": {
                      "static": {
                        "class": "slds-r9"
                      }
                    }
                  }
                ]
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label announcing the app launcher action.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          },
          {
            "value": "help",
            "class": "slds-button slds-button_icon slds-icon-help",
            "description": "Hover and click animations for help icon",
            "restrict": [
              "button"
            ],
            "children": [
              {
                "name": "svg",
                "restrict": [
                  "svg"
                ],
                "description": "SVG canvas with the masked question-mark glyph and the hover/focus halo circles.",
                "attributes": {
                  "static": {
                    "class": "slds-button__icon"
                  }
                },
                "children": [
                  {
                    "name": "hoverHalo",
                    "restrict": [
                      "circle"
                    ],
                    "description": "Modifies hover effect of global help icon",
                    "attributes": {
                      "static": {
                        "class": "slds-icon-help_hover"
                      }
                    }
                  },
                  {
                    "name": "focusHalo",
                    "restrict": [
                      "circle"
                    ],
                    "description": "Modifies focus effect of global help icon",
                    "attributes": {
                      "static": {
                        "class": "slds-icon-help_focus"
                      }
                    }
                  }
                ]
              },
              {
                "name": "assistiveText",
                "restrict": [
                  "span"
                ],
                "description": "Visually hidden label announcing the help action.",
                "attributes": {
                  "static": {
                    "class": "slds-assistive-text"
                  }
                }
              }
            ]
          }
        ]
      }
    ],
    "modifiers": [
      {
        "name": "animated",
        "attribute": "class",
        "value": "slds-is-animated",
        "description": "Add .slds-is-animated to the SVG to enhance the icon with an animation."
      },
      {
        "name": "paused",
        "attribute": "class",
        "value": "slds-is-paused",
        "description": "Add .slds-is-paused to the SVG to pause the icon with an animation."
      }
    ]
  },
  "stateClasses": [
    {
      "state": "animated",
      "class": "slds-is-animated"
    },
    {
      "state": "paused",
      "class": "slds-is-paused"
    }
  ],
  "states": [
    {
      "name": "animated",
      "type": "boolean",
      "description": "Whether the component is in the animated state"
    },
    {
      "name": "paused",
      "type": "boolean",
      "description": "Whether the component is in the paused state"
    }
  ]
}