# svelte-heroicons

![svelte-heroicons: Heroicons for Svelte 5](static/og.png)

[Heroicons](https://heroicons.com) for Svelte 5: all 324 icons in the 24px outline and solid styles, through one typed `<Icon name>` component or as separate tree-shakeable components.

Search the icons and copy their code in the [icon browser](https://krowten.github.io/svelte-heroicons/). Every icon has its own page there with the code and the raw SVG.

## Installation

```sh
npm install @krowten/svelte-heroicons
```

Requires Svelte 5.

## Usage

Render any icon with `Icon` and its heroicons name:

```svelte
<script>
	import { Icon } from '@krowten/svelte-heroicons';
</script>

<Icon name="beaker" class="size-6 text-blue-500" />
<Icon name="beaker" class="size-6 text-blue-500" solid />
```

`name` is typed as `IconName`, a union of all icon names, so a typo is a type error. Use the type for your own props:

```svelte
<script lang="ts">
	import { Icon, type IconName } from '@krowten/svelte-heroicons';

	const { icon }: { icon: IconName } = $props();
</script>

<Icon name={icon} class="size-5" />
```

`Icon` includes all 324 icons, about 65 KB gzipped. If bundle size matters, import the icons you use as components instead; only those end up in your bundle:

```svelte
<script>
	import { BeakerIcon } from '@krowten/svelte-heroicons';
	// or: import BeakerIcon from '@krowten/svelte-heroicons/icons/BeakerIcon.svelte';
</script>

<BeakerIcon class="size-6 text-blue-500" solid />
```

Component names are the heroicons names in PascalCase with an `Icon` suffix: `arrow-up-tray` is `ArrowUpTrayIcon`.

AI assistants can read [llms.txt](https://krowten.github.io/svelte-heroicons/llms.txt), or [llms-full.txt](https://krowten.github.io/svelte-heroicons/llms-full.txt) with every icon name and its component.

## Props

| Prop          | Type               | Default | Description                                  |
| ------------- | ------------------ | ------- | -------------------------------------------- |
| `solid`       | `boolean`          | `false` | Render the solid variant instead of outline. |
| `strokeWidth` | `number \| string` | `1.5`   | Stroke width of the outline variant.         |
| `name`        | `IconName`         | —       | `Icon` only: which icon to render. Required. |

Any other attribute or event handler (`class`, `style`, `fill`, `onclick`, …) is passed through to the `<svg>` element and overrides the defaults.

## Styling

Icons use `currentColor`, so they take the text color of their parent or of a class like `text-gray-500` in [Tailwind CSS](https://tailwindcss.com). Icons are 24×24 by default through `width` and `height` attributes, so they never collapse or stretch to fill their container; any CSS size, like `class="size-5"`, takes precedence.

## Accessibility

Icons are decorative by default and rendered with `aria-hidden="true"`. Give an icon an `aria-label` (or `aria-labelledby`) and it is exposed to screen readers as an image instead:

```svelte
<button>
	<Icon name="trash" class="size-5" aria-label="Delete" />
</button>
```

## Rules

- Install `@krowten/svelte-heroicons`. The main API is one component that takes the heroicons name: `import { Icon } from '@krowten/svelte-heroicons'`, then `<Icon name="beaker" />`. There is no `@heroicons/svelte` package.
- `name` is typed as `IconName`, the union of all heroicons v2 names (`arrow-up-tray`, `magnifying-glass`). Heroicons v1 names such as `logout` or `search` do not exist; the full list is below.
- `Icon` includes every icon, about 65 KB gzipped. When bundle size matters, import single icons as components instead: `import { BeakerIcon } from '@krowten/svelte-heroicons'`, then `<BeakerIcon />`. The component name is the heroicons name in PascalCase plus `Icon`: `arrow-up-tray` is `ArrowUpTrayIcon`.
- Add the `solid` prop for the filled style: `<Icon name="beaker" solid />`. Only the 24px outline and solid styles are included, not the 20px mini or 16px micro ones.
- Icons are 24×24 by default. Size them with CSS (`class="size-5"`) and color them with the text color; they use `currentColor`.
- Icons are `aria-hidden` by default. An icon with an `aria-label` gets `role="img"`.
- Requires Svelte 5.

## All icons

Heroicons name (the `name` of `<Icon>`) → standalone component. Each renders the outline style, or the solid style with the `solid` prop.

- academic-cap → AcademicCapIcon
- adjustments-horizontal → AdjustmentsHorizontalIcon
- adjustments-vertical → AdjustmentsVerticalIcon
- archive-box → ArchiveBoxIcon
- archive-box-arrow-down → ArchiveBoxArrowDownIcon
- archive-box-x-mark → ArchiveBoxXMarkIcon
- arrow-down → ArrowDownIcon
- arrow-down-circle → ArrowDownCircleIcon
- arrow-down-left → ArrowDownLeftIcon
- arrow-down-on-square → ArrowDownOnSquareIcon
- arrow-down-on-square-stack → ArrowDownOnSquareStackIcon
- arrow-down-right → ArrowDownRightIcon
- arrow-down-tray → ArrowDownTrayIcon
- arrow-left → ArrowLeftIcon
- arrow-left-circle → ArrowLeftCircleIcon
- arrow-left-end-on-rectangle → ArrowLeftEndOnRectangleIcon
- arrow-left-on-rectangle → ArrowLeftOnRectangleIcon
- arrow-left-start-on-rectangle → ArrowLeftStartOnRectangleIcon
- arrow-long-down → ArrowLongDownIcon
- arrow-long-left → ArrowLongLeftIcon
- arrow-long-right → ArrowLongRightIcon
- arrow-long-up → ArrowLongUpIcon
- arrow-path → ArrowPathIcon
- arrow-path-rounded-square → ArrowPathRoundedSquareIcon
- arrow-right → ArrowRightIcon
- arrow-right-circle → ArrowRightCircleIcon
- arrow-right-end-on-rectangle → ArrowRightEndOnRectangleIcon
- arrow-right-on-rectangle → ArrowRightOnRectangleIcon
- arrow-right-start-on-rectangle → ArrowRightStartOnRectangleIcon
- arrow-small-down → ArrowSmallDownIcon
- arrow-small-left → ArrowSmallLeftIcon
- arrow-small-right → ArrowSmallRightIcon
- arrow-small-up → ArrowSmallUpIcon
- arrow-top-right-on-square → ArrowTopRightOnSquareIcon
- arrow-trending-down → ArrowTrendingDownIcon
- arrow-trending-up → ArrowTrendingUpIcon
- arrow-turn-down-left → ArrowTurnDownLeftIcon
- arrow-turn-down-right → ArrowTurnDownRightIcon
- arrow-turn-left-down → ArrowTurnLeftDownIcon
- arrow-turn-left-up → ArrowTurnLeftUpIcon
- arrow-turn-right-down → ArrowTurnRightDownIcon
- arrow-turn-right-up → ArrowTurnRightUpIcon
- arrow-turn-up-left → ArrowTurnUpLeftIcon
- arrow-turn-up-right → ArrowTurnUpRightIcon
- arrow-up → ArrowUpIcon
- arrow-up-circle → ArrowUpCircleIcon
- arrow-up-left → ArrowUpLeftIcon
- arrow-up-on-square → ArrowUpOnSquareIcon
- arrow-up-on-square-stack → ArrowUpOnSquareStackIcon
- arrow-up-right → ArrowUpRightIcon
- arrow-up-tray → ArrowUpTrayIcon
- arrow-uturn-down → ArrowUturnDownIcon
- arrow-uturn-left → ArrowUturnLeftIcon
- arrow-uturn-right → ArrowUturnRightIcon
- arrow-uturn-up → ArrowUturnUpIcon
- arrows-pointing-in → ArrowsPointingInIcon
- arrows-pointing-out → ArrowsPointingOutIcon
- arrows-right-left → ArrowsRightLeftIcon
- arrows-up-down → ArrowsUpDownIcon
- at-symbol → AtSymbolIcon
- backspace → BackspaceIcon
- backward → BackwardIcon
- banknotes → BanknotesIcon
- bars-2 → Bars2Icon
- bars-3 → Bars3Icon
- bars-3-bottom-left → Bars3BottomLeftIcon
- bars-3-bottom-right → Bars3BottomRightIcon
- bars-3-center-left → Bars3CenterLeftIcon
- bars-4 → Bars4Icon
- bars-arrow-down → BarsArrowDownIcon
- bars-arrow-up → BarsArrowUpIcon
- battery-0 → Battery0Icon
- battery-100 → Battery100Icon
- battery-50 → Battery50Icon
- beaker → BeakerIcon
- bell → BellIcon
- bell-alert → BellAlertIcon
- bell-slash → BellSlashIcon
- bell-snooze → BellSnoozeIcon
- bold → BoldIcon
- bolt → BoltIcon
- bolt-slash → BoltSlashIcon
- book-open → BookOpenIcon
- bookmark → BookmarkIcon
- bookmark-slash → BookmarkSlashIcon
- bookmark-square → BookmarkSquareIcon
- briefcase → BriefcaseIcon
- bug-ant → BugAntIcon
- building-library → BuildingLibraryIcon
- building-office → BuildingOfficeIcon
- building-office-2 → BuildingOffice2Icon
- building-storefront → BuildingStorefrontIcon
- cake → CakeIcon
- calculator → CalculatorIcon
- calendar → CalendarIcon
- calendar-date-range → CalendarDateRangeIcon
- calendar-days → CalendarDaysIcon
- camera → CameraIcon
- chart-bar → ChartBarIcon
- chart-bar-square → ChartBarSquareIcon
- chart-pie → ChartPieIcon
- chat-bubble-bottom-center → ChatBubbleBottomCenterIcon
- chat-bubble-bottom-center-text → ChatBubbleBottomCenterTextIcon
- chat-bubble-left → ChatBubbleLeftIcon
- chat-bubble-left-ellipsis → ChatBubbleLeftEllipsisIcon
- chat-bubble-left-right → ChatBubbleLeftRightIcon
- chat-bubble-oval-left → ChatBubbleOvalLeftIcon
- chat-bubble-oval-left-ellipsis → ChatBubbleOvalLeftEllipsisIcon
- check → CheckIcon
- check-badge → CheckBadgeIcon
- check-circle → CheckCircleIcon
- chevron-double-down → ChevronDoubleDownIcon
- chevron-double-left → ChevronDoubleLeftIcon
- chevron-double-right → ChevronDoubleRightIcon
- chevron-double-up → ChevronDoubleUpIcon
- chevron-down → ChevronDownIcon
- chevron-left → ChevronLeftIcon
- chevron-right → ChevronRightIcon
- chevron-up → ChevronUpIcon
- chevron-up-down → ChevronUpDownIcon
- circle-stack → CircleStackIcon
- clipboard → ClipboardIcon
- clipboard-document → ClipboardDocumentIcon
- clipboard-document-check → ClipboardDocumentCheckIcon
- clipboard-document-list → ClipboardDocumentListIcon
- clock → ClockIcon
- cloud → CloudIcon
- cloud-arrow-down → CloudArrowDownIcon
- cloud-arrow-up → CloudArrowUpIcon
- code-bracket → CodeBracketIcon
- code-bracket-square → CodeBracketSquareIcon
- cog → CogIcon
- cog-6-tooth → Cog6ToothIcon
- cog-8-tooth → Cog8ToothIcon
- command-line → CommandLineIcon
- computer-desktop → ComputerDesktopIcon
- cpu-chip → CpuChipIcon
- credit-card → CreditCardIcon
- cube → CubeIcon
- cube-transparent → CubeTransparentIcon
- currency-bangladeshi → CurrencyBangladeshiIcon
- currency-dollar → CurrencyDollarIcon
- currency-euro → CurrencyEuroIcon
- currency-pound → CurrencyPoundIcon
- currency-rupee → CurrencyRupeeIcon
- currency-yen → CurrencyYenIcon
- cursor-arrow-rays → CursorArrowRaysIcon
- cursor-arrow-ripple → CursorArrowRippleIcon
- device-phone-mobile → DevicePhoneMobileIcon
- device-tablet → DeviceTabletIcon
- divide → DivideIcon
- document → DocumentIcon
- document-arrow-down → DocumentArrowDownIcon
- document-arrow-up → DocumentArrowUpIcon
- document-chart-bar → DocumentChartBarIcon
- document-check → DocumentCheckIcon
- document-currency-bangladeshi → DocumentCurrencyBangladeshiIcon
- document-currency-dollar → DocumentCurrencyDollarIcon
- document-currency-euro → DocumentCurrencyEuroIcon
- document-currency-pound → DocumentCurrencyPoundIcon
- document-currency-rupee → DocumentCurrencyRupeeIcon
- document-currency-yen → DocumentCurrencyYenIcon
- document-duplicate → DocumentDuplicateIcon
- document-magnifying-glass → DocumentMagnifyingGlassIcon
- document-minus → DocumentMinusIcon
- document-plus → DocumentPlusIcon
- document-text → DocumentTextIcon
- ellipsis-horizontal → EllipsisHorizontalIcon
- ellipsis-horizontal-circle → EllipsisHorizontalCircleIcon
- ellipsis-vertical → EllipsisVerticalIcon
- envelope → EnvelopeIcon
- envelope-open → EnvelopeOpenIcon
- equals → EqualsIcon
- exclamation-circle → ExclamationCircleIcon
- exclamation-triangle → ExclamationTriangleIcon
- eye → EyeIcon
- eye-dropper → EyeDropperIcon
- eye-slash → EyeSlashIcon
- face-frown → FaceFrownIcon
- face-smile → FaceSmileIcon
- film → FilmIcon
- finger-print → FingerPrintIcon
- fire → FireIcon
- flag → FlagIcon
- folder → FolderIcon
- folder-arrow-down → FolderArrowDownIcon
- folder-minus → FolderMinusIcon
- folder-open → FolderOpenIcon
- folder-plus → FolderPlusIcon
- forward → ForwardIcon
- funnel → FunnelIcon
- gif → GifIcon
- gift → GiftIcon
- gift-top → GiftTopIcon
- globe-alt → GlobeAltIcon
- globe-americas → GlobeAmericasIcon
- globe-asia-australia → GlobeAsiaAustraliaIcon
- globe-europe-africa → GlobeEuropeAfricaIcon
- h1 → H1Icon
- h2 → H2Icon
- h3 → H3Icon
- hand-raised → HandRaisedIcon
- hand-thumb-down → HandThumbDownIcon
- hand-thumb-up → HandThumbUpIcon
- hashtag → HashtagIcon
- heart → HeartIcon
- home → HomeIcon
- home-modern → HomeModernIcon
- identification → IdentificationIcon
- inbox → InboxIcon
- inbox-arrow-down → InboxArrowDownIcon
- inbox-stack → InboxStackIcon
- information-circle → InformationCircleIcon
- italic → ItalicIcon
- key → KeyIcon
- language → LanguageIcon
- lifebuoy → LifebuoyIcon
- light-bulb → LightBulbIcon
- link → LinkIcon
- link-slash → LinkSlashIcon
- list-bullet → ListBulletIcon
- lock-closed → LockClosedIcon
- lock-open → LockOpenIcon
- magnifying-glass → MagnifyingGlassIcon
- magnifying-glass-circle → MagnifyingGlassCircleIcon
- magnifying-glass-minus → MagnifyingGlassMinusIcon
- magnifying-glass-plus → MagnifyingGlassPlusIcon
- map → MapIcon
- map-pin → MapPinIcon
- megaphone → MegaphoneIcon
- microphone → MicrophoneIcon
- minus → MinusIcon
- minus-circle → MinusCircleIcon
- minus-small → MinusSmallIcon
- moon → MoonIcon
- musical-note → MusicalNoteIcon
- newspaper → NewspaperIcon
- no-symbol → NoSymbolIcon
- numbered-list → NumberedListIcon
- paint-brush → PaintBrushIcon
- paper-airplane → PaperAirplaneIcon
- paper-clip → PaperClipIcon
- pause → PauseIcon
- pause-circle → PauseCircleIcon
- pencil → PencilIcon
- pencil-square → PencilSquareIcon
- percent-badge → PercentBadgeIcon
- phone → PhoneIcon
- phone-arrow-down-left → PhoneArrowDownLeftIcon
- phone-arrow-up-right → PhoneArrowUpRightIcon
- phone-x-mark → PhoneXMarkIcon
- photo → PhotoIcon
- play → PlayIcon
- play-circle → PlayCircleIcon
- play-pause → PlayPauseIcon
- plus → PlusIcon
- plus-circle → PlusCircleIcon
- plus-small → PlusSmallIcon
- power → PowerIcon
- presentation-chart-bar → PresentationChartBarIcon
- presentation-chart-line → PresentationChartLineIcon
- printer → PrinterIcon
- puzzle-piece → PuzzlePieceIcon
- qr-code → QrCodeIcon
- question-mark-circle → QuestionMarkCircleIcon
- queue-list → QueueListIcon
- radio → RadioIcon
- receipt-percent → ReceiptPercentIcon
- receipt-refund → ReceiptRefundIcon
- rectangle-group → RectangleGroupIcon
- rectangle-stack → RectangleStackIcon
- rocket-launch → RocketLaunchIcon
- rss → RssIcon
- scale → ScaleIcon
- scissors → ScissorsIcon
- server → ServerIcon
- server-stack → ServerStackIcon
- share → ShareIcon
- shield-check → ShieldCheckIcon
- shield-exclamation → ShieldExclamationIcon
- shopping-bag → ShoppingBagIcon
- shopping-cart → ShoppingCartIcon
- signal → SignalIcon
- signal-slash → SignalSlashIcon
- slash → SlashIcon
- sparkles → SparklesIcon
- speaker-wave → SpeakerWaveIcon
- speaker-x-mark → SpeakerXMarkIcon
- square-2-stack → Square2StackIcon
- square-3-stack-3d → Square3Stack3dIcon
- squares-2x2 → Squares2x2Icon
- squares-plus → SquaresPlusIcon
- star → StarIcon
- stop → StopIcon
- stop-circle → StopCircleIcon
- strikethrough → StrikethroughIcon
- sun → SunIcon
- swatch → SwatchIcon
- table-cells → TableCellsIcon
- tag → TagIcon
- ticket → TicketIcon
- trash → TrashIcon
- trophy → TrophyIcon
- truck → TruckIcon
- tv → TvIcon
- underline → UnderlineIcon
- user → UserIcon
- user-circle → UserCircleIcon
- user-group → UserGroupIcon
- user-minus → UserMinusIcon
- user-plus → UserPlusIcon
- users → UsersIcon
- variable → VariableIcon
- video-camera → VideoCameraIcon
- video-camera-slash → VideoCameraSlashIcon
- view-columns → ViewColumnsIcon
- viewfinder-circle → ViewfinderCircleIcon
- wallet → WalletIcon
- wifi → WifiIcon
- window → WindowIcon
- wrench → WrenchIcon
- wrench-screwdriver → WrenchScrewdriverIcon
- x-circle → XCircleIcon
- x-mark → XMarkIcon