heroicons-react

Heroicons React

Installation

yarn add heroicons-react

npm install heroicons-react

Usage

import React from "react";
import { Sparkles } from "heroicons-react";

const App = () => {
  return <Sparkles />;
};

export default App;

Icons can be sized - based on height (default: 24)

<Sparkles size={42} />

You can also include the whole icon pack:

import React from "react";
import * as Icons from "heroicons-react";

const App = () => {
  return <Icons.Sparkles />;
};

export default App;

Available Icons

.
├── AcademicCap.tsx
├── AcademicCapOutline.tsx
├── Adjustments.tsx
├── AdjustmentsOutline.tsx
├── Annotation.tsx
├── AnnotationOutline.tsx
├── Archive.tsx
├── ArchiveOutline.tsx
├── ArrowCircleDown.tsx
├── ArrowCircleDownOutline.tsx
├── ArrowCircleLeft.tsx
├── ArrowCircleLeftOutline.tsx
├── ArrowCircleRight.tsx
├── ArrowCircleRightOutline.tsx
├── ArrowCircleUp.tsx
├── ArrowCircleUpOutline.tsx
├── ArrowDown.tsx
├── ArrowDownOutline.tsx
├── ArrowLeft.tsx
├── ArrowLeftOutline.tsx
├── ArrowNarrowDown.tsx
├── ArrowNarrowDownOutline.tsx
├── ArrowNarrowLeft.tsx
├── ArrowNarrowLeftOutline.tsx
├── ArrowNarrowRight.tsx
├── ArrowNarrowRightOutline.tsx
├── ArrowNarrowUp.tsx
├── ArrowNarrowUpOutline.tsx
├── ArrowRight.tsx
├── ArrowRightOutline.tsx
├── ArrowUp.tsx
├── ArrowUpOutline.tsx
├── ArrowsExpand.tsx
├── ArrowsExpandOutline.tsx
├── AtSymbol.tsx
├── AtSymbolOutline.tsx
├── Backspace.tsx
├── BackspaceOutline.tsx
├── BadgeCheck.tsx
├── BadgeCheckOutline.tsx
├── Ban.tsx
├── BanOutline.tsx
├── Beaker.tsx
├── BeakerOutline.tsx
├── Bell.tsx
├── BellOutline.tsx
├── BookOpen.tsx
├── BookOpenOutline.tsx
├── Bookmark.tsx
├── BookmarkAlt.tsx
├── BookmarkAltOutline.tsx
├── BookmarkOutline.tsx
├── Briefcase.tsx
├── BriefcaseOutline.tsx
├── Cake.tsx
├── CakeOutline.tsx
├── Calculator.tsx
├── CalculatorOutline.tsx
├── Calendar.tsx
├── CalendarOutline.tsx
├── Camera.tsx
├── CameraOutline.tsx
├── Cash.tsx
├── CashOutline.tsx
├── ChartBar.tsx
├── ChartBarOutline.tsx
├── ChartPie.tsx
├── ChartPieOutline.tsx
├── ChartSquareBar.tsx
├── ChartSquareBarOutline.tsx
├── Chat.tsx
├── ChatAlt.tsx
├── ChatAlt2.tsx
├── ChatAlt2Outline.tsx
├── ChatAltOutline.tsx
├── ChatOutline.tsx
├── Check.tsx
├── CheckCircle.tsx
├── CheckCircleOutline.tsx
├── CheckOutline.tsx
├── ChevronDoubleDown.tsx
├── ChevronDoubleDownOutline.tsx
├── ChevronDoubleLeft.tsx
├── ChevronDoubleLeftOutline.tsx
├── ChevronDoubleRight.tsx
├── ChevronDoubleRightOutline.tsx
├── ChevronDoubleUp.tsx
├── ChevronDoubleUpOutline.tsx
├── ChevronDown.tsx
├── ChevronDownOutline.tsx
├── ChevronLeft.tsx
├── ChevronLeftOutline.tsx
├── ChevronRight.tsx
├── ChevronRightOutline.tsx
├── ChevronUp.tsx
├── ChevronUpOutline.tsx
├── Chip.tsx
├── ChipOutline.tsx
├── Clipboard.tsx
├── ClipboardCheck.tsx
├── ClipboardCheckOutline.tsx
├── ClipboardCopy.tsx
├── ClipboardCopyOutline.tsx
├── ClipboardList.tsx
├── ClipboardListOutline.tsx
├── ClipboardOutline.tsx
├── Clock.tsx
├── ClockOutline.tsx
├── Cloud.tsx
├── CloudDownload.tsx
├── CloudDownloadOutline.tsx
├── CloudOutline.tsx
├── CloudUpload.tsx
├── CloudUploadOutline.tsx
├── Code.tsx
├── CodeOutline.tsx
├── Cog.tsx
├── CogOutline.tsx
├── Collection.tsx
├── CollectionOutline.tsx
├── ColorSwatch.tsx
├── ColorSwatchOutline.tsx
├── CreditCard.tsx
├── CreditCardOutline.tsx
├── Cube.tsx
├── CubeOutline.tsx
├── CubeTransparent.tsx
├── CubeTransparentOutline.tsx
├── CurrencyBangladeshi.tsx
├── CurrencyBangladeshiOutline.tsx
├── CurrencyDollar.tsx
├── CurrencyDollarOutline.tsx
├── CurrencyEuro.tsx
├── CurrencyEuroOutline.tsx
├── CurrencyPound.tsx
├── CurrencyPoundOutline.tsx
├── CurrencyRupee.tsx
├── CurrencyRupeeOutline.tsx
├── CurrencyYen.tsx
├── CurrencyYenOutline.tsx
├── CursorClick.tsx
├── CursorClickOutline.tsx
├── Database.tsx
├── DatabaseOutline.tsx
├── DesktopComputer.tsx
├── DesktopComputerOutline.tsx
├── DeviceMobile.tsx
├── DeviceMobileOutline.tsx
├── DeviceTablet.tsx
├── DeviceTabletOutline.tsx
├── Document.tsx
├── DocumentAdd.tsx
├── DocumentAddOutline.tsx
├── DocumentDownload.tsx
├── DocumentDownloadOutline.tsx
├── DocumentDuplicate.tsx
├── DocumentDuplicateOutline.tsx
├── DocumentOutline.tsx
├── DocumentRemove.tsx
├── DocumentRemoveOutline.tsx
├── DocumentReport.tsx
├── DocumentReportOutline.tsx
├── DocumentSearch.tsx
├── DocumentSearchOutline.tsx
├── DocumentText.tsx
├── DocumentTextOutline.tsx
├── DotsCircleHorizontal.tsx
├── DotsCircleHorizontalOutline.tsx
├── DotsHorizontal.tsx
├── DotsHorizontalOutline.tsx
├── DotsVertical.tsx
├── DotsVerticalOutline.tsx
├── Download.tsx
├── DownloadOutline.tsx
├── Duplicate.tsx
├── DuplicateOutline.tsx
├── EmojiHappy.tsx
├── EmojiHappyOutline.tsx
├── EmojiSad.tsx
├── EmojiSadOutline.tsx
├── Exclamation.tsx
├── ExclamationCircle.tsx
├── ExclamationCircleOutline.tsx
├── ExclamationOutline.tsx
├── ExternalLink.tsx
├── ExternalLinkOutline.tsx
├── Eye.tsx
├── EyeOff.tsx
├── EyeOffOutline.tsx
├── EyeOutline.tsx
├── FastForward.tsx
├── FastForwardOutline.tsx
├── Film.tsx
├── FilmOutline.tsx
├── Filter.tsx
├── FilterOutline.tsx
├── FingerPrint.tsx
├── FingerPrintOutline.tsx
├── Fire.tsx
├── FireOutline.tsx
├── Flag.tsx
├── FlagOutline.tsx
├── Folder.tsx
├── FolderAdd.tsx
├── FolderAddOutline.tsx
├── FolderDownload.tsx
├── FolderDownloadOutline.tsx
├── FolderOpen.tsx
├── FolderOpenOutline.tsx
├── FolderOutline.tsx
├── FolderRemove.tsx
├── FolderRemoveOutline.tsx
├── Gift.tsx
├── GiftOutline.tsx
├── Globe.tsx
├── GlobeAlt.tsx
├── GlobeAltOutline.tsx
├── GlobeOutline.tsx
├── Hand.tsx
├── HandOutline.tsx
├── Hashtag.tsx
├── HashtagOutline.tsx
├── Heart.tsx
├── HeartOutline.tsx
├── Home.tsx
├── HomeOutline.tsx
├── Identification.tsx
├── IdentificationOutline.tsx
├── Inbox.tsx
├── InboxIn.tsx
├── InboxInOutline.tsx
├── InboxOutline.tsx
├── InformationCircle.tsx
├── InformationCircleOutline.tsx
├── Key.tsx
├── KeyOutline.tsx
├── Library.tsx
├── LibraryOutline.tsx
├── LightBulb.tsx
├── LightBulbOutline.tsx
├── LightningBolt.tsx
├── LightningBoltOutline.tsx
├── Link.tsx
├── LinkOutline.tsx
├── LocationMarker.tsx
├── LocationMarkerOutline.tsx
├── LockClosed.tsx
├── LockClosedOutline.tsx
├── LockOpen.tsx
├── LockOpenOutline.tsx
├── Login.tsx
├── LoginOutline.tsx
├── Logout.tsx
├── LogoutOutline.tsx
├── Mail.tsx
├── MailOpen.tsx
├── MailOpenOutline.tsx
├── MailOutline.tsx
├── Map.tsx
├── MapOutline.tsx
├── Menu.tsx
├── MenuAlt1.tsx
├── MenuAlt1Outline.tsx
├── MenuAlt2.tsx
├── MenuAlt2Outline.tsx
├── MenuAlt3.tsx
├── MenuAlt3Outline.tsx
├── MenuAlt4.tsx
├── MenuAlt4Outline.tsx
├── MenuOutline.tsx
├── Microphone.tsx
├── MicrophoneOutline.tsx
├── Minus.tsx
├── MinusCircle.tsx
├── MinusCircleOutline.tsx
├── MinusOutline.tsx
├── MinusSm.tsx
├── MinusSmOutline.tsx
├── Moon.tsx
├── MoonOutline.tsx
├── MusicNote.tsx
├── MusicNoteOutline.tsx
├── Newspaper.tsx
├── NewspaperOutline.tsx
├── OfficeBuilding.tsx
├── OfficeBuildingOutline.tsx
├── PaperAirplane.tsx
├── PaperAirplaneOutline.tsx
├── PaperClip.tsx
├── PaperClipOutline.tsx
├── Pause.tsx
├── PauseOutline.tsx
├── Pencil.tsx
├── PencilAlt.tsx
├── PencilAltOutline.tsx
├── PencilOutline.tsx
├── Phone.tsx
├── PhoneIncoming.tsx
├── PhoneIncomingOutline.tsx
├── PhoneMissedCall.tsx
├── PhoneMissedCallOutline.tsx
├── PhoneOutgoing.tsx
├── PhoneOutgoingOutline.tsx
├── PhoneOutline.tsx
├── Photograph.tsx
├── PhotographOutline.tsx
├── Play.tsx
├── PlayOutline.tsx
├── Plus.tsx
├── PlusCircle.tsx
├── PlusCircleOutline.tsx
├── PlusOutline.tsx
├── PlusSm.tsx
├── PlusSmOutline.tsx
├── PresentationChartBar.tsx
├── PresentationChartBarOutline.tsx
├── PresentationChartLine.tsx
├── PresentationChartLineOutline.tsx
├── Printer.tsx
├── PrinterOutline.tsx
├── Puzzle.tsx
├── PuzzleOutline.tsx
├── Qrcode.tsx
├── QrcodeOutline.tsx
├── QuestionMarkCircle.tsx
├── QuestionMarkCircleOutline.tsx
├── ReceiptRefund.tsx
├── ReceiptRefundOutline.tsx
├── ReceiptTax.tsx
├── ReceiptTaxOutline.tsx
├── Refresh.tsx
├── RefreshOutline.tsx
├── Reply.tsx
├── ReplyOutline.tsx
├── Rewind.tsx
├── RewindOutline.tsx
├── Rss.tsx
├── RssOutline.tsx
├── Save.tsx
├── SaveAs.tsx
├── SaveAsOutline.tsx
├── SaveOutline.tsx
├── Scale.tsx
├── ScaleOutline.tsx
├── Scissors.tsx
├── ScissorsOutline.tsx
├── Search.tsx
├── SearchCircle.tsx
├── SearchCircleOutline.tsx
├── SearchOutline.tsx
├── Selector.tsx
├── SelectorOutline.tsx
├── Server.tsx
├── ServerOutline.tsx
├── Share.tsx
├── ShareOutline.tsx
├── ShieldCheck.tsx
├── ShieldCheckOutline.tsx
├── ShieldExclamation.tsx
├── ShieldExclamationOutline.tsx
├── ShoppingBag.tsx
├── ShoppingBagOutline.tsx
├── ShoppingCart.tsx
├── ShoppingCartOutline.tsx
├── SortAscending.tsx
├── SortAscendingOutline.tsx
├── SortDescending.tsx
├── SortDescendingOutline.tsx
├── Sparkles.tsx
├── SparklesOutline.tsx
├── Speakerphone.tsx
├── SpeakerphoneOutline.tsx
├── Star.tsx
├── StarOutline.tsx
├── StatusOffline.tsx
├── StatusOfflineOutline.tsx
├── StatusOnline.tsx
├── StatusOnlineOutline.tsx
├── Stop.tsx
├── StopOutline.tsx
├── Sun.tsx
├── SunOutline.tsx
├── Support.tsx
├── SupportOutline.tsx
├── SwitchHorizontal.tsx
├── SwitchHorizontalOutline.tsx
├── SwitchVertical.tsx
├── SwitchVerticalOutline.tsx
├── Table.tsx
├── TableOutline.tsx
├── Tag.tsx
├── TagOutline.tsx
├── Template.tsx
├── TemplateOutline.tsx
├── Terminal.tsx
├── TerminalOutline.tsx
├── ThumbDown.tsx
├── ThumbDownOutline.tsx
├── ThumbUp.tsx
├── ThumbUpOutline.tsx
├── Ticket.tsx
├── TicketOutline.tsx
├── Translate.tsx
├── TranslateOutline.tsx
├── Trash.tsx
├── TrashOutline.tsx
├── TrendingDown.tsx
├── TrendingDownOutline.tsx
├── TrendingUp.tsx
├── TrendingUpOutline.tsx
├── Truck.tsx
├── TruckOutline.tsx
├── Upload.tsx
├── UploadOutline.tsx
├── User.tsx
├── UserAdd.tsx
├── UserAddOutline.tsx
├── UserCircle.tsx
├── UserCircleOutline.tsx
├── UserGroup.tsx
├── UserGroupOutline.tsx
├── UserOutline.tsx
├── UserRemove.tsx
├── UserRemoveOutline.tsx
├── Users.tsx
├── UsersOutline.tsx
├── Variable.tsx
├── VariableOutline.tsx
├── VideoCamera.tsx
├── VideoCameraOutline.tsx
├── ViewBoards.tsx
├── ViewBoardsOutline.tsx
├── ViewGrid.tsx
├── ViewGridAdd.tsx
├── ViewGridAddOutline.tsx
├── ViewGridOutline.tsx
├── ViewList.tsx
├── ViewListOutline.tsx
├── VolumeOff.tsx
├── VolumeOffOutline.tsx
├── VolumeUp.tsx
├── VolumeUpOutline.tsx
├── Wifi.tsx
├── WifiOutline.tsx
├── X.tsx
├── XCircle.tsx
├── XCircleOutline.tsx
├── XOutline.tsx
├── ZoomIn.tsx
├── ZoomInOutline.tsx
├── ZoomOut.tsx
└── ZoomOutOutline.tsx