# Icon

Render SVG icons from local files or Iconify-packaged sets.

**Import:** `import Icon from "@cloudflare/nimbus-docs/components/Icon.astro";`  
**Canonical:** https://docs.klounge.kr/components/icon/

## Agent payload (JSON)

```json
{
  "slug": "icon",
  "name": "Icon",
  "tagline": "Render SVG icons from local files or Iconify-packaged sets.",
  "import": "import Icon from \"@cloudflare/nimbus-docs/components/Icon.astro\";",
  "canonicalUrl": "https://docs.klounge.kr/components/icon/",
  "props": [
    {
      "name": "name",
      "type": "string",
      "required": true,
      "description": "Icon name. Bare names (e.g. `workers`) resolve to local `src/icons/*.svg`. Prefixed names (e.g. `ph:rocket`) resolve to an installed `@iconify-json/*` set."
    },
    {
      "name": "size",
      "type": "number | string",
      "required": false,
      "description": "Shorthand that sets both `width` and `height`."
    },
    {
      "name": "width",
      "type": "number | string",
      "required": false,
      "description": "Override the SVG width."
    },
    {
      "name": "height",
      "type": "number | string",
      "required": false,
      "description": "Override the SVG height."
    },
    {
      "name": "is:inline",
      "type": "boolean",
      "defaultValue": "false",
      "required": false,
      "description": "Accepted for API compatibility with astro-icon. SVGs are always inlined; this prop has no effect on output."
    },
    {
      "name": "title",
      "type": "string",
      "required": false,
      "description": "Accessible title rendered inside `<title>`."
    },
    {
      "name": "desc",
      "type": "string",
      "required": false,
      "description": "Accessible description rendered inside `<desc>`."
    }
  ]
}
```