Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/graywolftech/react-heroicons

Heroicons as React components
https://github.com/graywolftech/react-heroicons

heroicons icons react tailwind tailwindcss

Last synced: about 2 months ago
JSON representation

Heroicons as React components

Awesome Lists containing this project

README 

        
[![@graywolfai/react-heroicons](https://badge.fury.io/js/%40graywolfai%2Freact-heroicons.svg)](https://badge.fury.io/js/%40graywolfai%2Freact-heroicons)



# React Heroicons



> A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.



This repository contains the [`heroicons`](https://github.com/refactoringui/heroicons) made by the team from [`refactoringui`](https://refactoringui.com/) as `React` components bundled in `ESM` format (ie. _no_ CommonJS format).



## Previewing the Icons



Preview the icons at [heroicons.dev](https://heroicons.dev) (Made by [`codex-zaydek`](https://github.com/codex-zaydek)).



## Installation & Usage



First, install this library!



```

npm install --save @graywolfai/react-heroicons

```



Now you have access to the entire `heroicons` library! They are formatted as [pascal case](https://techterms.com/definition/pascalcase) and have `Solid`(solid format) or `Outline` (outline format) appended at the end. You use them like you would any `svg` component.



Tiny Icons (Heroicons v2.0) are accessible by appending `TinySolid` to the name provided on HeroIcons



```tsx

import { ArchiveBoxSolid } from "@graywolfai/react-heroicons";

import { ArchiveBoxOutline } from "@graywolfai/react-heroicons";

import { ArchiveBoxTinySolid } from "@graywolfai/react-heroicons";



export const SomeComponent = () => {

  return (

    ...

    

    

    

    ...

  )

}

```



> Note the above example assumes you are using [`Tailwind CSS`](https://tailwindcss.com/) but the color is easily stylable by using the CSS `color` property.



## Icons



```

↳ AcademicCapOutline

↳ AcademicCapSolid

↳ AcademicCapTinySolid

↳ AdjustmentsHorizontalOutline

↳ AdjustmentsHorizontalSolid

↳ AdjustmentsHorizontalTinySolid

↳ AdjustmentsVerticalOutline

↳ AdjustmentsVerticalSolid

↳ AdjustmentsVerticalTinySolid

↳ ArchiveBoxArrowDownOutline

↳ ArchiveBoxArrowDownSolid

↳ ArchiveBoxArrowDownTinySolid

↳ ArchiveBoxOutline

↳ ArchiveBoxSolid

↳ ArchiveBoxTinySolid

↳ ArchiveBoxXMarkOutline

↳ ArchiveBoxXMarkSolid

↳ ArchiveBoxXMarkTinySolid

↳ ArrowDownCircleOutline

↳ ArrowDownCircleSolid

↳ ArrowDownCircleTinySolid

↳ ArrowDownLeftOutline

↳ ArrowDownLeftSolid

↳ ArrowDownLeftTinySolid

↳ ArrowDownOnSquareOutline

↳ ArrowDownOnSquareSolid

↳ ArrowDownOnSquareStackOutline

↳ ArrowDownOnSquareStackSolid

↳ ArrowDownOnSquareStackTinySolid

↳ ArrowDownOnSquareTinySolid

↳ ArrowDownOutline

↳ ArrowDownRightOutline

↳ ArrowDownRightSolid

↳ ArrowDownRightTinySolid

↳ ArrowDownSolid

↳ ArrowDownTinySolid

↳ ArrowDownTrayOutline

↳ ArrowDownTraySolid

↳ ArrowDownTrayTinySolid

↳ ArrowLeftCircleOutline

↳ ArrowLeftCircleSolid

↳ ArrowLeftCircleTinySolid

↳ ArrowLeftOnRectangleOutline

↳ ArrowLeftOnRectangleSolid

↳ ArrowLeftOnRectangleTinySolid

↳ ArrowLeftOutline

↳ ArrowLeftSolid

↳ ArrowLeftTinySolid

↳ ArrowLongDownOutline

↳ ArrowLongDownSolid

↳ ArrowLongDownTinySolid

↳ ArrowLongLeftOutline

↳ ArrowLongLeftSolid

↳ ArrowLongLeftTinySolid

↳ ArrowLongRightOutline

↳ ArrowLongRightSolid

↳ ArrowLongRightTinySolid

↳ ArrowLongUpOutline

↳ ArrowLongUpSolid

↳ ArrowLongUpTinySolid

↳ ArrowPathOutline

↳ ArrowPathRoundedSquareOutline

↳ ArrowPathRoundedSquareSolid

↳ ArrowPathRoundedSquareTinySolid

↳ ArrowPathSolid

↳ ArrowPathTinySolid

↳ ArrowRightCircleOutline

↳ ArrowRightCircleSolid

↳ ArrowRightCircleTinySolid

↳ ArrowRightOnRectangleOutline

↳ ArrowRightOnRectangleSolid

↳ ArrowRightOnRectangleTinySolid

↳ ArrowRightOutline

↳ ArrowRightSolid

↳ ArrowRightTinySolid

↳ ArrowSmallDownOutline

↳ ArrowSmallDownSolid

↳ ArrowSmallDownTinySolid

↳ ArrowSmallLeftOutline

↳ ArrowSmallLeftSolid

↳ ArrowSmallLeftTinySolid

↳ ArrowSmallRightOutline

↳ ArrowSmallRightSolid

↳ ArrowSmallRightTinySolid

↳ ArrowSmallUpOutline

↳ ArrowSmallUpSolid

↳ ArrowSmallUpTinySolid

↳ ArrowsPointingInOutline

↳ ArrowsPointingInSolid

↳ ArrowsPointingInTinySolid

↳ ArrowsPointingOutOutline

↳ ArrowsPointingOutSolid

↳ ArrowsPointingOutTinySolid

↳ ArrowsRightLeftOutline

↳ ArrowsRightLeftSolid

↳ ArrowsRightLeftTinySolid

↳ ArrowsUpDownOutline

↳ ArrowsUpDownSolid

↳ ArrowsUpDownTinySolid

↳ ArrowTopRightOnSquareOutline

↳ ArrowTopRightOnSquareSolid

↳ ArrowTopRightOnSquareTinySolid

↳ ArrowTrendingDownOutline

↳ ArrowTrendingDownSolid

↳ ArrowTrendingDownTinySolid

↳ ArrowTrendingUpOutline

↳ ArrowTrendingUpSolid

↳ ArrowTrendingUpTinySolid

↳ ArrowUpCircleOutline

↳ ArrowUpCircleSolid

↳ ArrowUpCircleTinySolid

↳ ArrowUpLeftOutline

↳ ArrowUpLeftSolid

↳ ArrowUpLeftTinySolid

↳ ArrowUpOnSquareOutline

↳ ArrowUpOnSquareSolid

↳ ArrowUpOnSquareStackOutline

↳ ArrowUpOnSquareStackSolid

↳ ArrowUpOnSquareStackTinySolid

↳ ArrowUpOnSquareTinySolid

↳ ArrowUpOutline

↳ ArrowUpRightOutline

↳ ArrowUpRightSolid

↳ ArrowUpRightTinySolid

↳ ArrowUpSolid

↳ ArrowUpTinySolid

↳ ArrowUpTrayOutline

↳ ArrowUpTraySolid

↳ ArrowUpTrayTinySolid

↳ ArrowUturnDownOutline

↳ ArrowUturnDownSolid

↳ ArrowUturnDownTinySolid

↳ ArrowUturnLeftOutline

↳ ArrowUturnLeftSolid

↳ ArrowUturnLeftTinySolid

↳ ArrowUturnRightOutline

↳ ArrowUturnRightSolid

↳ ArrowUturnRightTinySolid

↳ ArrowUturnUpOutline

↳ ArrowUturnUpSolid

↳ ArrowUturnUpTinySolid

↳ AtSymbolOutline

↳ AtSymbolSolid

↳ AtSymbolTinySolid

↳ BackspaceOutline

↳ BackspaceSolid

↳ BackspaceTinySolid

↳ BackwardOutline

↳ BackwardSolid

↳ BackwardTinySolid

↳ BanknotesOutline

↳ BanknotesSolid

↳ BanknotesTinySolid

↳ Bars2Outline

↳ Bars2Solid

↳ Bars2TinySolid

↳ Bars3BottomLeftOutline

↳ Bars3BottomLeftSolid

↳ Bars3BottomLeftTinySolid

↳ Bars3BottomRightOutline

↳ Bars3BottomRightSolid

↳ Bars3BottomRightTinySolid

↳ Bars3CenterLeftOutline

↳ Bars3CenterLeftSolid

↳ Bars3CenterLeftTinySolid

↳ Bars3Outline

↳ Bars3Solid

↳ Bars3TinySolid

↳ Bars4Outline

↳ Bars4Solid

↳ Bars4TinySolid

↳ BarsArrowDownOutline

↳ BarsArrowDownSolid

↳ BarsArrowDownTinySolid

↳ BarsArrowUpOutline

↳ BarsArrowUpSolid

↳ BarsArrowUpTinySolid

↳ Battery0Outline

↳ Battery0Solid

↳ Battery0TinySolid

↳ Battery100Outline

↳ Battery100Solid

↳ Battery100TinySolid

↳ Battery50Outline

↳ Battery50Solid

↳ Battery50TinySolid

↳ BeakerOutline

↳ BeakerSolid

↳ BeakerTinySolid

↳ BellAlertOutline

↳ BellAlertSolid

↳ BellAlertTinySolid

↳ BellOutline

↳ BellSlashOutline

↳ BellSlashSolid

↳ BellSlashTinySolid

↳ BellSnoozeOutline

↳ BellSnoozeSolid

↳ BellSnoozeTinySolid

↳ BellSolid

↳ BellTinySolid

↳ BoltOutline

↳ BoltSlashOutline

↳ BoltSlashSolid

↳ BoltSlashTinySolid

↳ BoltSolid

↳ BoltTinySolid

↳ BookmarkOutline

↳ BookmarkSlashOutline

↳ BookmarkSlashSolid

↳ BookmarkSlashTinySolid

↳ BookmarkSolid

↳ BookmarkSquareOutline

↳ BookmarkSquareSolid

↳ BookmarkSquareTinySolid

↳ BookmarkTinySolid

↳ BookOpenOutline

↳ BookOpenSolid

↳ BookOpenTinySolid

↳ BriefcaseOutline

↳ BriefcaseSolid

↳ BriefcaseTinySolid

↳ BuildingLibraryOutline

↳ BuildingLibrarySolid

↳ BuildingLibraryTinySolid

↳ BuildingOffice2Outline

↳ BuildingOffice2Solid

↳ BuildingOffice2TinySolid

↳ BuildingOfficeOutline

↳ BuildingOfficeSolid

↳ BuildingOfficeTinySolid

↳ BuildingStorefrontOutline

↳ BuildingStorefrontSolid

↳ BuildingStorefrontTinySolid

↳ CakeOutline

↳ CakeSolid

↳ CakeTinySolid

↳ CalculatorOutline

↳ CalculatorSolid

↳ CalculatorTinySolid

↳ CalendarDaysOutline

↳ CalendarDaysSolid

↳ CalendarDaysTinySolid

↳ CalendarOutline

↳ CalendarSolid

↳ CalendarTinySolid

↳ CameraOutline

↳ CameraSolid

↳ CameraTinySolid

↳ ChartBarOutline

↳ ChartBarSolid

↳ ChartBarSquareOutline

↳ ChartBarSquareSolid

↳ ChartBarSquareTinySolid

↳ ChartBarTinySolid

↳ ChartPieOutline

↳ ChartPieSolid

↳ ChartPieTinySolid

↳ ChatBubbleBottomCenterOutline

↳ ChatBubbleBottomCenterSolid

↳ ChatBubbleBottomCenterTextOutline

↳ ChatBubbleBottomCenterTextSolid

↳ ChatBubbleBottomCenterTextTinySolid

↳ ChatBubbleBottomCenterTinySolid

↳ ChatBubbleLeftEllipsisOutline

↳ ChatBubbleLeftEllipsisSolid

↳ ChatBubbleLeftEllipsisTinySolid

↳ ChatBubbleLeftOutline

↳ ChatBubbleLeftRightOutline

↳ ChatBubbleLeftRightSolid

↳ ChatBubbleLeftRightTinySolid

↳ ChatBubbleLeftSolid

↳ ChatBubbleLeftTinySolid

↳ ChatBubbleOvalLeftEllipsisOutline

↳ ChatBubbleOvalLeftEllipsisSolid

↳ ChatBubbleOvalLeftEllipsisTinySolid

↳ ChatBubbleOvalLeftOutline

↳ ChatBubbleOvalLeftSolid

↳ ChatBubbleOvalLeftTinySolid

↳ CheckBadgeOutline

↳ CheckBadgeSolid

↳ CheckBadgeTinySolid

↳ CheckCircleOutline

↳ CheckCircleSolid

↳ CheckCircleTinySolid

↳ CheckOutline

↳ CheckSolid

↳ CheckTinySolid

↳ ChevronDoubleDownOutline

↳ ChevronDoubleDownSolid

↳ ChevronDoubleDownTinySolid

↳ ChevronDoubleLeftOutline

↳ ChevronDoubleLeftSolid

↳ ChevronDoubleLeftTinySolid

↳ ChevronDoubleRightOutline

↳ ChevronDoubleRightSolid

↳ ChevronDoubleRightTinySolid

↳ ChevronDoubleUpOutline

↳ ChevronDoubleUpSolid

↳ ChevronDoubleUpTinySolid

↳ ChevronDownOutline

↳ ChevronDownSolid

↳ ChevronDownTinySolid

↳ ChevronLeftOutline

↳ ChevronLeftSolid

↳ ChevronLeftTinySolid

↳ ChevronRightOutline

↳ ChevronRightSolid

↳ ChevronRightTinySolid

↳ ChevronUpDownOutline

↳ ChevronUpDownSolid

↳ ChevronUpDownTinySolid

↳ ChevronUpOutline

↳ ChevronUpSolid

↳ ChevronUpTinySolid

↳ CircleStackOutline

↳ CircleStackSolid

↳ CircleStackTinySolid

↳ ClipboardDocumentCheckOutline

↳ ClipboardDocumentCheckSolid

↳ ClipboardDocumentCheckTinySolid

↳ ClipboardDocumentListOutline

↳ ClipboardDocumentListSolid

↳ ClipboardDocumentListTinySolid

↳ ClipboardDocumentOutline

↳ ClipboardDocumentSolid

↳ ClipboardDocumentTinySolid

↳ ClipboardOutline

↳ ClipboardSolid

↳ ClipboardTinySolid

↳ ClockOutline

↳ ClockSolid

↳ ClockTinySolid

↳ CloudArrowDownOutline

↳ CloudArrowDownSolid

↳ CloudArrowDownTinySolid

↳ CloudArrowUpOutline

↳ CloudArrowUpSolid

↳ CloudArrowUpTinySolid

↳ CloudOutline

↳ CloudSolid

↳ CloudTinySolid

↳ CodeBracketOutline

↳ CodeBracketSolid

↳ CodeBracketSquareOutline

↳ CodeBracketSquareSolid

↳ CodeBracketSquareTinySolid

↳ CodeBracketTinySolid

↳ Cog6ToothOutline

↳ Cog6ToothSolid

↳ Cog6ToothTinySolid

↳ Cog8ToothOutline

↳ Cog8ToothSolid

↳ Cog8ToothTinySolid

↳ CogOutline

↳ CogSolid

↳ CogTinySolid

↳ CommandLineOutline

↳ CommandLineSolid

↳ CommandLineTinySolid

↳ ComputerDesktopOutline

↳ ComputerDesktopSolid

↳ ComputerDesktopTinySolid

↳ CpuChipOutline

↳ CpuChipSolid

↳ CpuChipTinySolid

↳ CreditCardOutline

↳ CreditCardSolid

↳ CreditCardTinySolid

↳ CubeOutline

↳ CubeSolid

↳ CubeTinySolid

↳ CubeTransparentOutline

↳ CubeTransparentSolid

↳ CubeTransparentTinySolid

↳ CurrencyBangladeshiOutline

↳ CurrencyBangladeshiSolid

↳ CurrencyBangladeshiTinySolid

↳ CurrencyDollarOutline

↳ CurrencyDollarSolid

↳ CurrencyDollarTinySolid

↳ CurrencyEuroOutline

↳ CurrencyEuroSolid

↳ CurrencyEuroTinySolid

↳ CurrencyPoundOutline

↳ CurrencyPoundSolid

↳ CurrencyPoundTinySolid

↳ CurrencyRupeeOutline

↳ CurrencyRupeeSolid

↳ CurrencyRupeeTinySolid

↳ CurrencyYenOutline

↳ CurrencyYenSolid

↳ CurrencyYenTinySolid

↳ CursorArrowRaysOutline

↳ CursorArrowRaysSolid

↳ CursorArrowRaysTinySolid

↳ CursorArrowRippleOutline

↳ CursorArrowRippleSolid

↳ CursorArrowRippleTinySolid

↳ DevicePhoneMobileOutline

↳ DevicePhoneMobileSolid

↳ DevicePhoneMobileTinySolid

↳ DeviceTabletOutline

↳ DeviceTabletSolid

↳ DeviceTabletTinySolid

↳ DocumentArrowDownOutline

↳ DocumentArrowDownSolid

↳ DocumentArrowDownTinySolid

↳ DocumentArrowUpOutline

↳ DocumentArrowUpSolid

↳ DocumentArrowUpTinySolid

↳ DocumentChartBarOutline

↳ DocumentChartBarSolid

↳ DocumentChartBarTinySolid

↳ DocumentCheckOutline

↳ DocumentCheckSolid

↳ DocumentCheckTinySolid

↳ DocumentDuplicateOutline

↳ DocumentDuplicateSolid

↳ DocumentDuplicateTinySolid

↳ DocumentMagnifyingGlassOutline

↳ DocumentMagnifyingGlassSolid

↳ DocumentMagnifyingGlassTinySolid

↳ DocumentMinusOutline

↳ DocumentMinusSolid

↳ DocumentMinusTinySolid

↳ DocumentOutline

↳ DocumentPlusOutline

↳ DocumentPlusSolid

↳ DocumentPlusTinySolid

↳ DocumentSolid

↳ DocumentTextOutline

↳ DocumentTextSolid

↳ DocumentTextTinySolid

↳ DocumentTinySolid

↳ EllipsisHorizontalCircleOutline

↳ EllipsisHorizontalCircleSolid

↳ EllipsisHorizontalCircleTinySolid

↳ EllipsisHorizontalOutline

↳ EllipsisHorizontalSolid

↳ EllipsisHorizontalTinySolid

↳ EllipsisVerticalOutline

↳ EllipsisVerticalSolid

↳ EllipsisVerticalTinySolid

↳ EnvelopeOpenOutline

↳ EnvelopeOpenSolid

↳ EnvelopeOpenTinySolid

↳ EnvelopeOutline

↳ EnvelopeSolid

↳ EnvelopeTinySolid

↳ ExclamationCircleOutline

↳ ExclamationCircleSolid

↳ ExclamationCircleTinySolid

↳ ExclamationTriangleOutline

↳ ExclamationTriangleSolid

↳ ExclamationTriangleTinySolid

↳ EyeOutline

↳ EyeSlashOutline

↳ EyeSlashSolid

↳ EyeSlashTinySolid

↳ EyeSolid

↳ EyeTinySolid

↳ FaceFrownOutline

↳ FaceFrownSolid

↳ FaceFrownTinySolid

↳ FaceSmileOutline

↳ FaceSmileSolid

↳ FaceSmileTinySolid

↳ FilmOutline

↳ FilmSolid

↳ FilmTinySolid

↳ FingerPrintOutline

↳ FingerPrintSolid

↳ FingerPrintTinySolid

↳ FireOutline

↳ FireSolid

↳ FireTinySolid

↳ FlagOutline

↳ FlagSolid

↳ FlagTinySolid

↳ FolderArrowDownOutline

↳ FolderArrowDownSolid

↳ FolderArrowDownTinySolid

↳ FolderMinusOutline

↳ FolderMinusSolid

↳ FolderMinusTinySolid

↳ FolderOpenOutline

↳ FolderOpenSolid

↳ FolderOpenTinySolid

↳ FolderOutline

↳ FolderPlusOutline

↳ FolderPlusSolid

↳ FolderPlusTinySolid

↳ FolderSolid

↳ FolderTinySolid

↳ ForwardOutline

↳ ForwardSolid

↳ ForwardTinySolid

↳ FunnelOutline

↳ FunnelSolid

↳ FunnelTinySolid

↳ GifOutline

↳ GifSolid

↳ GifTinySolid

↳ GiftOutline

↳ GiftSolid

↳ GiftTinySolid

↳ GiftTopOutline

↳ GiftTopSolid

↳ GiftTopTinySolid

↳ GlobeAltOutline

↳ GlobeAltSolid

↳ GlobeAltTinySolid

↳ GlobeAmericasOutline

↳ GlobeAmericasSolid

↳ GlobeAmericasTinySolid

↳ GlobeAsiaAustraliaOutline

↳ GlobeAsiaAustraliaSolid

↳ GlobeAsiaAustraliaTinySolid

↳ GlobeEuropeAfricaOutline

↳ GlobeEuropeAfricaSolid

↳ GlobeEuropeAfricaTinySolid

↳ HandRaisedOutline

↳ HandRaisedSolid

↳ HandRaisedTinySolid

↳ HandThumbDownOutline

↳ HandThumbDownSolid

↳ HandThumbDownTinySolid

↳ HandThumbUpOutline

↳ HandThumbUpSolid

↳ HandThumbUpTinySolid

↳ HashtagOutline

↳ HashtagSolid

↳ HashtagTinySolid

↳ HeartOutline

↳ HeartSolid

↳ HeartTinySolid

↳ HomeModernOutline

↳ HomeModernSolid

↳ HomeModernTinySolid

↳ HomeOutline

↳ HomeSolid

↳ HomeTinySolid

↳ IdentificationOutline

↳ IdentificationSolid

↳ IdentificationTinySolid

↳ InboxArrowDownOutline

↳ InboxArrowDownSolid

↳ InboxArrowDownTinySolid

↳ InboxOutline

↳ InboxSolid

↳ InboxStackOutline

↳ InboxStackSolid

↳ InboxStackTinySolid

↳ InboxTinySolid

↳ InformationCircleOutline

↳ InformationCircleSolid

↳ InformationCircleTinySolid

↳ KeyOutline

↳ KeySolid

↳ KeyTinySolid

↳ LanguageOutline

↳ LanguageSolid

↳ LanguageTinySolid

↳ LifebuoyOutline

↳ LifebuoySolid

↳ LifebuoyTinySolid

↳ LightBulbOutline

↳ LightBulbSolid

↳ LightBulbTinySolid

↳ LinkOutline

↳ LinkSolid

↳ LinkTinySolid

↳ ListBulletOutline

↳ ListBulletSolid

↳ ListBulletTinySolid

↳ LockClosedOutline

↳ LockClosedSolid

↳ LockClosedTinySolid

↳ LockOpenOutline

↳ LockOpenSolid

↳ LockOpenTinySolid

↳ MagnifyingGlassCircleOutline

↳ MagnifyingGlassCircleSolid

↳ MagnifyingGlassCircleTinySolid

↳ MagnifyingGlassMinusOutline

↳ MagnifyingGlassMinusSolid

↳ MagnifyingGlassMinusTinySolid

↳ MagnifyingGlassOutline

↳ MagnifyingGlassPlusOutline

↳ MagnifyingGlassPlusSolid

↳ MagnifyingGlassPlusTinySolid

↳ MagnifyingGlassSolid

↳ MagnifyingGlassTinySolid

↳ MapOutline

↳ MapPinOutline

↳ MapPinSolid

↳ MapPinTinySolid

↳ MapSolid

↳ MapTinySolid

↳ MegaphoneOutline

↳ MegaphoneSolid

↳ MegaphoneTinySolid

↳ MicrophoneOutline

↳ MicrophoneSolid

↳ MicrophoneTinySolid

↳ MinusCircleOutline

↳ MinusCircleSolid

↳ MinusCircleTinySolid

↳ MinusOutline

↳ MinusSmallOutline

↳ MinusSmallSolid

↳ MinusSmallTinySolid

↳ MinusSolid

↳ MinusTinySolid

↳ MoonOutline

↳ MoonSolid

↳ MoonTinySolid

↳ MusicalNoteOutline

↳ MusicalNoteSolid

↳ MusicalNoteTinySolid

↳ NewspaperOutline

↳ NewspaperSolid

↳ NewspaperTinySolid

↳ NoSymbolOutline

↳ NoSymbolSolid

↳ NoSymbolTinySolid

↳ PaintBrushOutline

↳ PaintBrushSolid

↳ PaintBrushTinySolid

↳ PaperAirplaneOutline

↳ PaperAirplaneSolid

↳ PaperAirplaneTinySolid

↳ PaperClipOutline

↳ PaperClipSolid

↳ PaperClipTinySolid

↳ PauseOutline

↳ PauseSolid

↳ PauseTinySolid

↳ PencilOutline

↳ PencilSolid

↳ PencilSquareOutline

↳ PencilSquareSolid

↳ PencilSquareTinySolid

↳ PencilTinySolid

↳ PhoneArrowDownLeftOutline

↳ PhoneArrowDownLeftSolid

↳ PhoneArrowDownLeftTinySolid

↳ PhoneArrowUpRightOutline

↳ PhoneArrowUpRightSolid

↳ PhoneArrowUpRightTinySolid

↳ PhoneOutline

↳ PhoneSolid

↳ PhoneTinySolid

↳ PhoneXMarkOutline

↳ PhoneXMarkSolid

↳ PhoneXMarkTinySolid

↳ PhotoOutline

↳ PhotoSolid

↳ PhotoTinySolid

↳ PlayOutline

↳ PlayPauseOutline

↳ PlayPauseSolid

↳ PlayPauseTinySolid

↳ PlaySolid

↳ PlayTinySolid

↳ PlusCircleOutline

↳ PlusCircleSolid

↳ PlusCircleTinySolid

↳ PlusOutline

↳ PlusSmallOutline

↳ PlusSmallSolid

↳ PlusSmallTinySolid

↳ PlusSolid

↳ PlusTinySolid

↳ PresentationChartBarOutline

↳ PresentationChartBarSolid

↳ PresentationChartBarTinySolid

↳ PresentationChartLineOutline

↳ PresentationChartLineSolid

↳ PresentationChartLineTinySolid

↳ PrinterOutline

↳ PrinterSolid

↳ PrinterTinySolid

↳ PuzzlePieceOutline

↳ PuzzlePieceSolid

↳ PuzzlePieceTinySolid

↳ QrCodeOutline

↳ QrCodeSolid

↳ QrCodeTinySolid

↳ QuestionMarkCircleOutline

↳ QuestionMarkCircleSolid

↳ QuestionMarkCircleTinySolid

↳ QueueListOutline

↳ QueueListSolid

↳ QueueListTinySolid

↳ RadioOutline

↳ RadioSolid

↳ RadioTinySolid

↳ ReceiptPercentOutline

↳ ReceiptPercentSolid

↳ ReceiptPercentTinySolid

↳ ReceiptRefundOutline

↳ ReceiptRefundSolid

↳ ReceiptRefundTinySolid

↳ RectangleGroupOutline

↳ RectangleGroupSolid

↳ RectangleGroupTinySolid

↳ RectangleStackOutline

↳ RectangleStackSolid

↳ RectangleStackTinySolid

↳ RssOutline

↳ RssSolid

↳ RssTinySolid

↳ ScaleOutline

↳ ScaleSolid

↳ ScaleTinySolid

↳ ScissorsOutline

↳ ScissorsSolid

↳ ScissorsTinySolid

↳ ServerOutline

↳ ServerSolid

↳ ServerStackOutline

↳ ServerStackSolid

↳ ServerStackTinySolid

↳ ServerTinySolid

↳ ShareOutline

↳ ShareSolid

↳ ShareTinySolid

↳ ShieldCheckOutline

↳ ShieldCheckSolid

↳ ShieldCheckTinySolid

↳ ShieldExclamationOutline

↳ ShieldExclamationSolid

↳ ShieldExclamationTinySolid

↳ ShoppingBagOutline

↳ ShoppingBagSolid

↳ ShoppingBagTinySolid

↳ ShoppingCartOutline

↳ ShoppingCartSolid

↳ ShoppingCartTinySolid

↳ SignalOutline

↳ SignalSlashOutline

↳ SignalSlashSolid

↳ SignalSlashTinySolid

↳ SignalSolid

↳ SignalTinySolid

↳ SparklesOutline

↳ SparklesSolid

↳ SparklesTinySolid

↳ SpeakerWaveOutline

↳ SpeakerWaveSolid

↳ SpeakerWaveTinySolid

↳ SpeakerXMarkOutline

↳ SpeakerXMarkSolid

↳ SpeakerXMarkTinySolid

↳ Square2StackOutline

↳ Square2StackSolid

↳ Square2StackTinySolid

↳ Squares2x2Outline

↳ Squares2x2Solid

↳ Squares2x2TinySolid

↳ SquaresPlusOutline

↳ SquaresPlusSolid

↳ SquaresPlusTinySolid

↳ StarOutline

↳ StarSolid

↳ StarTinySolid

↳ StopOutline

↳ StopSolid

↳ StopTinySolid

↳ SunOutline

↳ SunSolid

↳ SunTinySolid

↳ SwatchOutline

↳ SwatchSolid

↳ SwatchTinySolid

↳ TableCellsOutline

↳ TableCellsSolid

↳ TableCellsTinySolid

↳ TagOutline

↳ TagSolid

↳ TagTinySolid

↳ TicketOutline

↳ TicketSolid

↳ TicketTinySolid

↳ TrashOutline

↳ TrashSolid

↳ TrashTinySolid

↳ TruckOutline

↳ TruckSolid

↳ TruckTinySolid

↳ UserCircleOutline

↳ UserCircleSolid

↳ UserCircleTinySolid

↳ UserGroupOutline

↳ UserGroupSolid

↳ UserGroupTinySolid

↳ UserMinusOutline

↳ UserMinusSolid

↳ UserMinusTinySolid

↳ UserOutline

↳ UserPlusOutline

↳ UserPlusSolid

↳ UserPlusTinySolid

↳ UserSolid

↳ UsersOutline

↳ UsersSolid

↳ UsersTinySolid

↳ UserTinySolid

↳ VariableOutline

↳ VariableSolid

↳ VariableTinySolid

↳ VideoCameraOutline

↳ VideoCameraSlashOutline

↳ VideoCameraSlashSolid

↳ VideoCameraSlashTinySolid

↳ VideoCameraSolid

↳ VideoCameraTinySolid

↳ ViewColumnsOutline

↳ ViewColumnsSolid

↳ ViewColumnsTinySolid

↳ WalletOutline

↳ WalletSolid

↳ WalletTinySolid

↳ WifiOutline

↳ WifiSolid

↳ WifiTinySolid

↳ WrenchOutline

↳ WrenchScrewdriverOutline

↳ WrenchScrewdriverSolid

↳ WrenchScrewdriverTinySolid

↳ WrenchSolid

↳ WrenchTinySolid

↳ XCircleOutline

↳ XCircleSolid

↳ XCircleTinySolid

↳ XMarkOutline

↳ XMarkSolid

↳ XMarkTinySolid

```



## Publishing



# Make sure you get the latest copy



```

rm -rf heroicons

```



# first generate the `tsx` files



# make sure to copy the output and replace the options above



```

npm run generate

```



# then bundle them into an ESM format



```

npm run compile

```



# then tag (make sure to push the commit/tag to GitHub and create a release)



```

npm version major|minor|patch

```



# Then publish!



```

npm publish

```



# And push



```

git push && git push --tags

```