{
  "title": "Icon",
  "description": "Thin wrapper around a user-supplied icon component with token-driven size and color.",
  "url": "/docs/components/icon",
  "since": "0.1.0",
  "tags": [
    "misc"
  ],
  "platform": "both",
  "source": "---\ntitle: Icon\ndescription: Thin wrapper around a user-supplied icon component with token-driven size and color.\nsince: 0.1.0\ntags: [misc]\nplatform: both\ncategory: misc\n---\n\nimport { BundleSize } from '@/components/bundle-size';\nimport { ExpoSnack } from '@/components/expo-snack';\nimport { Preview } from '@/components/preview';\nimport { PropsTable } from '@/components/props-table';\n\n<BundleSize component=\"Icon\" />\n\n## At a glance\n\n- Icon-library-agnostic — pass any component matching `{ size?: number; color?: string }` (lucide, RN-vector-icons, Heroicons, your own SVGs).\n- Pair with [`SemanticIconsProvider`](/docs/foundations/icons) to alias semantic keys (`checkmark`, `close`, `spinner`, …) to concrete icons. Components like `Alert` and `Checkbox` resolve their default icons through this provider, so swapping the icon set in one place updates the whole library.\n\n## Preview\n\nThe example below uses the library's built-in `defaultSemanticIcons`. Drop in your own component (e.g. `lucide-react`'s `Star`) by passing it to `as`.\n\n<Preview name=\"icon-basic\" />\n\n## Native preview\n\n<ExpoSnack component=\"Icon\" height={250} />\n\n## `as`\n\nThe icon component to render. Anything with the shape\n`(props: { size?: number; color?: string }) => ReactNode` works.\n\n```tsx\nimport { Star } from 'lucide-react-native';\nimport { Icon } from '@nori-ui/core';\n\n<Icon as={Star} />\n```\n\nIf you're using the semantic icon registry, you usually won't pass\n`as` directly — the components that need icons resolve them via\n`SemanticIconsProvider`.\n\n## `size`\n\nPixel size. Defaults to 16. Pass a number; the icon component itself\nchooses how to scale (most lucide / Heroicons render `width={size}`\n`height={size}`).\n\n```tsx\n<Icon as={Star} size={24} />\n```\n\n## `color`\n\nCSS color string forwarded to the underlying icon component. Defaults\nto the active theme's `text.default`. Override per-instance for\naccents.\n\n```tsx\n<Icon as={Star} color=\"#facc15\" />     // amber star\n```\n\n## Props\n\n<PropsTable component=\"Icon\" />\n"
}