{
  "_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": "Icon",
  "description": "Icons provide visual context and enhance usability.",
  "structure": {
    "name": "root",
    "restrict": [
      "span"
    ],
    "description": "Container for icons",
    "attributes": {
      "bound": {
        "title": {
          "prop": "title"
        }
      },
      "static": {
        "class": "slds-icon_container"
      }
    },
    "children": [
      {
        "name": "svg",
        "restrict": [
          "svg"
        ],
        "description": "SVG icon element",
        "attributes": {
          "static": {
            "aria-hidden": "true",
            "class": "slds-icon"
          },
          "bound": {
            "aria-label": {
              "prop": "assistiveText"
            }
          }
        },
        "children": [
          {
            "name": "use",
            "restrict": [
              "use"
            ],
            "description": "SVG sprite reference; xlink:href points at the symbol inside the relevant sprite sheet",
            "attributes": {
              "bound": {
                "xlink:href": {
                  "prop": "spriteHref",
                  "required": true
                }
              }
            }
          }
        ],
        "modifiers": [
          {
            "name": "size",
            "attribute": "class",
            "description": "Icon size — the canonical SLDS markup applies the size class to the inner <svg>, not the wrapping container.",
            "default": "medium",
            "options": [
              {
                "propValue": "xxx-small",
                "value": "slds-icon_xxx-small"
              },
              {
                "propValue": "xx-small",
                "value": "slds-icon_xx-small"
              },
              {
                "propValue": "x-small",
                "value": "slds-icon_x-small"
              },
              {
                "propValue": "small",
                "value": "slds-icon_small"
              },
              {
                "propValue": "medium",
                "value": ""
              },
              {
                "propValue": "large",
                "value": "slds-icon_large"
              }
            ]
          }
        ]
      },
      {
        "name": "assistiveText",
        "restrict": [
          "span"
        ],
        "description": "Assistive text for screen readers",
        "renderWhen": "slotFilled",
        "slot": {
          "name": "assistiveText"
        },
        "attributes": {
          "static": {
            "class": "slds-assistive-text"
          }
        }
      }
    ],
    "modifiers": [
      {
        "name": "circle",
        "attribute": "class",
        "value": "slds-icon_container_circle",
        "description": "Circle container for icons"
      },
      {
        "name": "currentColor",
        "attribute": "class",
        "value": "slds-current-color",
        "description": "Inherits parent text color rather than the sprite's default color"
      },
      {
        "name": "disabled",
        "attribute": "class",
        "value": "slds-icon_disabled",
        "description": "The icon container of icon in a disabled element"
      },
      {
        "name": "flip",
        "attribute": "class",
        "value": "slds-icon_flip",
        "description": "Horizontally flip icons"
      }
    ],
    "variants": [
      {
        "name": "variant",
        "description": "Semantic color variant indicating meaning or status; applied to the inner svg.",
        "default": "none",
        "options": [
          {
            "value": "none",
            "class": "",
            "description": "No semantic color applied. The canonical default when Icon is composed inside another component (Badge, Button, etc.) — its color should inherit from the parent, not declare its own semantic intent."
          },
          {
            "value": "default",
            "class": "slds-icon-text-default",
            "description": "Changes the icon fill color to match the default state"
          },
          {
            "value": "warning",
            "class": "slds-icon-text-warning",
            "description": "Changes the icon fill color to match the warning state"
          },
          {
            "value": "error",
            "class": "slds-icon-text-error",
            "description": "Changes the icon fill color to match the error state"
          },
          {
            "value": "success",
            "class": "slds-icon-text-success",
            "description": "Changes the icon fill color to match the success state"
          },
          {
            "value": "light",
            "class": "slds-icon-text-light"
          }
        ]
      },
      {
        "name": "utilityIcon",
        "description": "Utility sprite glyph applied to the icon container (slds-icon-utility-{name}).",
        "default": "none",
        "options": [
          {
            "value": "none",
            "class": "",
            "description": "No utility-sprite glyph applied; pick another sprite family or rely on the runtime iconName."
          },
          {
            "value": "announcement",
            "class": "slds-icon-utility-announcement"
          },
          {
            "value": "picklist_type",
            "class": "slds-icon-utility-picklist_type"
          }
        ]
      },
      {
        "name": "standardIcon",
        "description": "Standard sprite glyph applied to the icon container (slds-icon-standard-{name}).",
        "default": "none",
        "options": [
          {
            "value": "none",
            "class": "",
            "description": "No standard-sprite glyph applied."
          },
          {
            "value": "account",
            "class": "slds-icon-standard-account"
          }
        ]
      },
      {
        "name": "actionIcon",
        "description": "Action sprite glyph applied to the icon container (slds-icon-action-{name}); typically paired with the circle modifier.",
        "default": "none",
        "options": [
          {
            "value": "none",
            "class": "",
            "description": "No action-sprite glyph applied."
          },
          {
            "value": "description",
            "class": "slds-icon-action-description"
          }
        ]
      },
      {
        "name": "customIcon",
        "description": "Custom sprite glyph applied to the icon container (slds-icon-custom-{name}).",
        "default": "none",
        "options": [
          {
            "value": "none",
            "class": "",
            "description": "No custom-sprite glyph applied."
          },
          {
            "value": "custom5",
            "class": "slds-icon-custom-custom5"
          }
        ]
      },
      {
        "name": "doctypeIcon",
        "description": "Doctype sprite glyph applied to the icon container (slds-icon-doctype-{name}).",
        "default": "none",
        "options": [
          {
            "value": "none",
            "class": "",
            "description": "No doctype-sprite glyph applied."
          },
          {
            "value": "xml",
            "class": "slds-icon-doctype-xml"
          }
        ]
      }
    ]
  },
  "states": [
    {
      "name": "decorative",
      "type": "boolean",
      "description": "Whether the icon is purely decorative and should be hidden from assistive technology"
    },
    {
      "name": "disabled",
      "type": "boolean",
      "description": "Whether the icon is rendered in a disabled (muted) state"
    },
    {
      "name": "flip",
      "type": "boolean",
      "description": "Whether the icon's glyph is mirrored for right-to-left locales"
    }
  ],
  "accessibility": {
    "requirements": [
      {
        "id": "decorative-hidden",
        "description": "Decorative icons should be hidden from assistive technology with aria-hidden='true'"
      },
      {
        "id": "meaningful-label",
        "description": "Meaningful icons should have assistive text that describes the icon's purpose"
      }
    ]
  },
  "extensions": {
    "com.salesforce-ux": {
      "dateAdded": "2015-09-04",
      "genReady": true,
      "lbc": "lightning-icon"
    },
    "com.salesforce-ux.customization": {
      "description": "Per-hook overrides for the Customization story that beat the test-value generator.",
      "hooks": {
        "--slds-c-icon-color-foreground": "var(--slds-g-color-accent-1)"
      }
    }
  },
  "cssSource": "./icon.css",
  "styleApi": {
    "status": "stable",
    "ready": true
  }
}