# Icon (/docs/components/visuals/icon) `Icon` renders a symbol from the Luke UI spritesheet. It requires an `IconSpritesheetProvider` ancestor. See Setup below. ## Best practices [#best-practices] | Guidance | Practices | | -------- | --------------------------------------------------------------------------------------------------------- | | Do | Pass `title` when the icon conveys meaning without adjacent text, such as a standalone status icon. | | Don't | Pass both `aria-hidden` and `title`. A titled icon should be exposed to assistive technology, not hidden. | ## Setup [#setup] Wrap your app with `IconSpritesheetProvider`. * Source asset: `@luke-ui/react/spritesheet.svg`, exported from `./dist/spritesheet.svg` * Runtime lookup: `#` ```tsx ``` Vite and Storybook should import the spritesheet as a URL. ```ts import spriteSheetHref from '@luke-ui/react/spritesheet.svg?url&no-inline'; ; ``` The `no-inline` query avoids `data:` URLs, which can break `` rendering. When developing `@luke-ui/react`, generate icons from `packages/@luke-ui/react/icons/*.svg` into `packages/@luke-ui/react/dist/spritesheet.svg`. ```bash pnpm --dir packages/@luke-ui/react run generate:icons ``` ## How it works [#how-it-works] `Icon` renders an `` that references a symbol in the generated spritesheet with ``. * `name` chooses the symbol id. * The sprite URL comes from `IconSpritesheetProvider`. * `viewBox` defaults to the generated icon viewBox. * Icon fill follows `currentColor`. ```tsx ``` ## Create your own icon [#create-your-own-icon] Use `createIcon` for a one-off icon that is not in the generated spritesheet. ## Accessibility [#accessibility] If `title` is provided, the icon is exposed to assistive technology with `role="img"`. If `title` is omitted, `aria-hidden` defaults to `true`. ## Props [#props]