{
  "name": "Icon",
  "source": "src/Icon.tsx",
  "propsType": "IconProps",
  "description": "Wrapper that applies the design system's icon sizing and accessibility\ndefaults to whatever icon component you hand it.\n\n  import { Plus } from 'lucide-react';\n  <Icon as={Plus} size=\"sm\" />\n  <Icon as={Plus} label=\"Add item\" />   // meaningful, gets an a11y name\n\nTakes the icon as a prop rather than re-exporting a set: a barrel of a\nthousand-plus icons defeats tree-shaking in several bundlers, and pinning one\nicon library would force it on every consumer. You import the one icon you\nneed, from whichever library you use, and it is the only one bundled.",
  "import": "import { Icon } from 'ionbase-ui';",
  "status": "stable",
  "summary": "Applies the system's icon sizing and accessibility defaults to any SVG component you hand it. The package ships no icon set.",
  "useWhen": [
    "rendering any icon inside this design system, from any library — lucide, heroicons, react-icons, your own SVG"
  ],
  "useInstead": [
    {
      "when": "the graphic is a brand mark",
      "use": "Logo or LogoMark"
    },
    {
      "when": "you need a coloured status marker with text",
      "use": "Badge"
    }
  ],
  "a11y": {
    "guarantees": [
      "with `label`, the icon gets `role=\"img\"` and that name",
      "without `label`, it is `aria-hidden` and `focusable=\"false\"` — decoration, never read twice"
    ],
    "requires": [
      "`label` when the icon carries meaning on its own — an icon-only button, a standalone status marker"
    ],
    "notes": [
      "Omit `label` for an icon beside a visible text label. The text already names it."
    ]
  },
  "antiPatterns": [
    {
      "dont": "`<Button startIcon={<Icon as={Plus} label=\"Add\" />}>Add</Button>`",
      "do": "drop the `label`",
      "why": "the button's own text names it; the labelled icon makes it announce twice"
    },
    {
      "dont": "hardcoding `width`/`height` in px",
      "do": "a `size` rung, or omit `size` to inherit the surrounding font size",
      "why": "inheriting is what lets an icon sit correctly inside a Button without the Button knowing about it"
    },
    {
      "dont": "assuming `size=\"xs\"` is 12px",
      "why": "the ladder shifted in 2026-08: `xs` is 14, and `2xs` is the old 12. This raises no type error"
    }
  ],
  "sizes": {
    "note": "The rungs map one-to-one onto the Semantics `icon-size/*` tokens. Any CSS length is also accepted for a one-off.",
    "ladder": {
      "2xs": 12,
      "xs": 14,
      "sm": 16,
      "md": 20,
      "lg": 24,
      "xl": 32
    }
  },
  "stylesheet": "src/styles/icon.css",
  "tokens": [],
  "props": {
    "as": {
      "type": "IconComponent",
      "required": true,
      "origin": "own",
      "description": "The icon component to render, e.g. `import { Plus } from 'lucide-react'`.\nAny SVG component works — the design system does not ship an icon set."
    },
    "size": {
      "type": "\"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xs\" | \"xs\" | (string & {}) | undefined",
      "required": false,
      "origin": "own",
      "description": "A rung on the `icon-size` ladder — `2xs` 12, `xs` 14, `sm` 16, `md` 20,\n`lg` 24, `xl` 32 — or any CSS length for a one-off. Omit to inherit the surrounding\nfont size, which is what lets an icon sit correctly inside a Button without\nthe Button having to know anything about this component."
    },
    "label": {
      "type": "string | undefined",
      "required": false,
      "origin": "own",
      "description": "Accessible name. Provide it when the icon carries meaning on its own — an\nicon-only button, a status marker. Omit it for decoration next to a visible\nlabel, and the icon is hidden from assistive tech instead of read out twice."
    }
  },
  "propCounts": {
    "own": 3,
    "aria": 0,
    "dom": 487,
    "other": 0
  }
}