All Projects → graywolftech → react-heroicons

graywolftech / react-heroicons

Licence: MIT License
Heroicons as React components

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-heroicons

Limg
An image hosting service powered by Laravel
Stars: ✭ 41 (+5.13%)
Mutual labels:  tailwind, tailwindcss
variantwind
Most elegant way to work with TailwindCSS variants in Vue
Stars: ✭ 45 (+15.38%)
Mutual labels:  tailwind, tailwindcss
twin.examples
Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.
Stars: ✭ 320 (+720.51%)
Mutual labels:  tailwind, tailwindcss
vscode-xwind
vscode extension for xwind
Stars: ✭ 16 (-58.97%)
Mutual labels:  tailwind, tailwindcss
tailwindcss-landing-gradients
A landing page made with tailwindcss and the new Gradient feature.
Stars: ✭ 41 (+5.13%)
Mutual labels:  tailwind, tailwindcss
next-tailwind-motion
A simple Next.js starter kit with TailwindCSS (JIT) and Framer Motion preconfigured. Optional feature branches for Locomotive Scroll, Sanity and Dato configuration coming soon...
Stars: ✭ 40 (+2.56%)
Mutual labels:  tailwind, tailwindcss
jekyll-atlantic-theme
Jekyll Atlantic is a beautiful Tailwind CSS theme. It shows best practices for using Tailwind with Jekyll.
Stars: ✭ 40 (+2.56%)
Mutual labels:  tailwind, tailwindcss
tailwind-color-alpha
Automatic alpha variants for your Tailwind CSS colors based on your opacity config
Stars: ✭ 21 (-46.15%)
Mutual labels:  tailwind, tailwindcss
memento-svelte-electron-typescript
Template to create a desktop app with Svelte, TailwindCSS, Electron and TypeScript (with electron-updater, electron-reload and electron-builder)
Stars: ✭ 27 (-30.77%)
Mutual labels:  tailwind, tailwindcss
stitchwind
A bridge between Tailwind and Stitches
Stars: ✭ 33 (-15.38%)
Mutual labels:  tailwind, tailwindcss
material-tailwind
@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
Stars: ✭ 861 (+2107.69%)
Mutual labels:  tailwind, tailwindcss
coc-tailwind-intellisense
Coc.nvim extension for Tailwind CSS IntelliSense
Stars: ✭ 117 (+200%)
Mutual labels:  tailwind, tailwindcss
tailwind-twitter-clone
Twitter UI Clone built during a live stream.
Stars: ✭ 19 (-51.28%)
Mutual labels:  tailwind, tailwindcss
eslint-plugin-tailwind
ESLint rules for Tailwind CSS
Stars: ✭ 97 (+148.72%)
Mutual labels:  tailwind, tailwindcss
create-next-pwa
⚡️ Set up Next.js Progressive Web App with `npx create-next-pwa`
Stars: ✭ 59 (+51.28%)
Mutual labels:  tailwind, tailwindcss
stencil-tailwind-plugin
Plugin for using tailwindcss with StencilJS
Stars: ✭ 17 (-56.41%)
Mutual labels:  tailwind, tailwindcss
svelte-tailwind-snowpack
TailwindCSS with Svelte and Snowpack v3
Stars: ✭ 100 (+156.41%)
Mutual labels:  tailwind, tailwindcss
vuejs-tailwindcss-portfolio
A simple multipage and responsive Vue.js & Tailwind CSS portfolio theme with dark mode.
Stars: ✭ 100 (+156.41%)
Mutual labels:  tailwind, tailwindcss
tailwindcss-postcss-browsersync-boilerplate
Tailwind CSS + PostCSS + BrowserSync boilerplate
Stars: ✭ 28 (-28.21%)
Mutual labels:  tailwind, tailwindcss
gridsome-starter-liebling
Gridsome starter based on the Liebling theme for Ghost. Content is added via markdown, while Tailwind CSS is used for the layout/styling.
Stars: ✭ 21 (-46.15%)
Mutual labels:  tailwind, tailwindcss

@graywolfai/react-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 made by the team from refactoringui as React components bundled in ESM format (ie. no CommonJS format).

Previewing the Icons

Preview the icons at heroicons.dev (Made by 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 and have either nothing (solid format) or Outline (outline format) appended at the end. You use them like you would any svg component.

import { ArchiveSolid } from "@graywolfai/react-heroicons";
import { ArchiveOutline } from "@graywolfai/react-heroicons"; // or

export const SomeComponent = () => {
  return (
    ...
    <ArchiveSolid className="h-6 w-6 text-gray-500"></ArchiveSolid>
    <ArchiveOutline className="h-6 w-6 text-gray-500"></ArchiveOutline> // or
    ...
  )
}

Note the above example assumes you are using Tailwind CSS but the color is easily stylable by using the CSS color property.

Icons

.
↳ AcademicCapOutline
↳ AcademicCapSolid
↳ AdjustmentsOutline
↳ AdjustmentsSolid
↳ AnnotationOutline
↳ AnnotationSolid
↳ ArchiveOutline
↳ ArchiveSolid
↳ ArrowCircleDownOutline
↳ ArrowCircleDownSolid
↳ ArrowCircleLeftOutline
↳ ArrowCircleLeftSolid
↳ ArrowCircleRightOutline
↳ ArrowCircleRightSolid
↳ ArrowCircleUpOutline
↳ ArrowCircleUpSolid
↳ ArrowDownOutline
↳ ArrowDownSolid
↳ ArrowLeftOutline
↳ ArrowLeftSolid
↳ ArrowNarrowDownOutline
↳ ArrowNarrowDownSolid
↳ ArrowNarrowLeftOutline
↳ ArrowNarrowLeftSolid
↳ ArrowNarrowRightOutline
↳ ArrowNarrowRightSolid
↳ ArrowNarrowUpOutline
↳ ArrowNarrowUpSolid
↳ ArrowRightOutline
↳ ArrowRightSolid
↳ ArrowsExpandOutline
↳ ArrowsExpandSolid
↳ ArrowSmDownOutline
↳ ArrowSmDownSolid
↳ ArrowSmLeftOutline
↳ ArrowSmLeftSolid
↳ ArrowSmRightOutline
↳ ArrowSmRightSolid
↳ ArrowSmUpOutline
↳ ArrowSmUpSolid
↳ ArrowUpOutline
↳ ArrowUpSolid
↳ AtSymbolOutline
↳ AtSymbolSolid
↳ BackspaceOutline
↳ BackspaceSolid
↳ BadgeCheckOutline
↳ BadgeCheckSolid
↳ BanOutline
↳ BanSolid
↳ BeakerOutline
↳ BeakerSolid
↳ BellOutline
↳ BellSolid
↳ BookmarkAltOutline
↳ BookmarkAltSolid
↳ BookmarkOutline
↳ BookmarkSolid
↳ BookOpenOutline
↳ BookOpenSolid
↳ BriefcaseOutline
↳ BriefcaseSolid
↳ CakeOutline
↳ CakeSolid
↳ CalculatorOutline
↳ CalculatorSolid
↳ CalendarOutline
↳ CalendarSolid
↳ CameraOutline
↳ CameraSolid
↳ CashOutline
↳ CashSolid
↳ ChartBarOutline
↳ ChartBarSolid
↳ ChartPieOutline
↳ ChartPieSolid
↳ ChartSquareBarOutline
↳ ChartSquareBarSolid
↳ ChatAlt2Outline
↳ ChatAlt2Solid
↳ ChatAltOutline
↳ ChatAltSolid
↳ ChatOutline
↳ ChatSolid
↳ CheckCircleOutline
↳ CheckCircleSolid
↳ CheckOutline
↳ CheckSolid
↳ ChevronDoubleDownOutline
↳ ChevronDoubleDownSolid
↳ ChevronDoubleLeftOutline
↳ ChevronDoubleLeftSolid
↳ ChevronDoubleRightOutline
↳ ChevronDoubleRightSolid
↳ ChevronDoubleUpOutline
↳ ChevronDoubleUpSolid
↳ ChevronDownOutline
↳ ChevronDownSolid
↳ ChevronLeftOutline
↳ ChevronLeftSolid
↳ ChevronRightOutline
↳ ChevronRightSolid
↳ ChevronUpOutline
↳ ChevronUpSolid
↳ ChipOutline
↳ ChipSolid
↳ ClipboardCheckOutline
↳ ClipboardCheckSolid
↳ ClipboardCopyOutline
↳ ClipboardCopySolid
↳ ClipboardListOutline
↳ ClipboardListSolid
↳ ClipboardOutline
↳ ClipboardSolid
↳ ClockOutline
↳ ClockSolid
↳ CloudDownloadOutline
↳ CloudDownloadSolid
↳ CloudOutline
↳ CloudSolid
↳ CloudUploadOutline
↳ CloudUploadSolid
↳ CodeOutline
↳ CodeSolid
↳ CogOutline
↳ CogSolid
↳ CollectionOutline
↳ CollectionSolid
↳ ColorSwatchOutline
↳ ColorSwatchSolid
↳ CreditCardOutline
↳ CreditCardSolid
↳ CubeOutline
↳ CubeSolid
↳ CubeTransparentOutline
↳ CubeTransparentSolid
↳ CurrencyBangladeshiOutline
↳ CurrencyBangladeshiSolid
↳ CurrencyDollarOutline
↳ CurrencyDollarSolid
↳ CurrencyEuroOutline
↳ CurrencyEuroSolid
↳ CurrencyPoundOutline
↳ CurrencyPoundSolid
↳ CurrencyRupeeOutline
↳ CurrencyRupeeSolid
↳ CurrencyYenOutline
↳ CurrencyYenSolid
↳ CursorClickOutline
↳ CursorClickSolid
↳ DatabaseOutline
↳ DatabaseSolid
↳ DesktopComputerOutline
↳ DesktopComputerSolid
↳ DeviceMobileOutline
↳ DeviceMobileSolid
↳ DeviceTabletOutline
↳ DeviceTabletSolid
↳ DocumentAddOutline
↳ DocumentAddSolid
↳ DocumentDownloadOutline
↳ DocumentDownloadSolid
↳ DocumentDuplicateOutline
↳ DocumentDuplicateSolid
↳ DocumentOutline
↳ DocumentRemoveOutline
↳ DocumentRemoveSolid
↳ DocumentReportOutline
↳ DocumentReportSolid
↳ DocumentSearchOutline
↳ DocumentSearchSolid
↳ DocumentSolid
↳ DocumentTextOutline
↳ DocumentTextSolid
↳ DotsCircleHorizontalOutline
↳ DotsCircleHorizontalSolid
↳ DotsHorizontalOutline
↳ DotsHorizontalSolid
↳ DotsVerticalOutline
↳ DotsVerticalSolid
↳ DownloadOutline
↳ DownloadSolid
↳ DuplicateOutline
↳ DuplicateSolid
↳ EmojiHappyOutline
↳ EmojiHappySolid
↳ EmojiSadOutline
↳ EmojiSadSolid
↳ ExclamationCircleOutline
↳ ExclamationCircleSolid
↳ ExclamationOutline
↳ ExclamationSolid
↳ ExternalLinkOutline
↳ ExternalLinkSolid
↳ EyeOffOutline
↳ EyeOffSolid
↳ EyeOutline
↳ EyeSolid
↳ FastForwardOutline
↳ FastForwardSolid
↳ FilmOutline
↳ FilmSolid
↳ FilterOutline
↳ FilterSolid
↳ FingerPrintOutline
↳ FingerPrintSolid
↳ FireOutline
↳ FireSolid
↳ FlagOutline
↳ FlagSolid
↳ FolderAddOutline
↳ FolderAddSolid
↳ FolderDownloadOutline
↳ FolderDownloadSolid
↳ FolderOpenOutline
↳ FolderOpenSolid
↳ FolderOutline
↳ FolderRemoveOutline
↳ FolderRemoveSolid
↳ FolderSolid
↳ GiftOutline
↳ GiftSolid
↳ GlobeAltOutline
↳ GlobeAltSolid
↳ GlobeOutline
↳ GlobeSolid
↳ HandOutline
↳ HandSolid
↳ HashtagOutline
↳ HashtagSolid
↳ HeartOutline
↳ HeartSolid
↳ HomeOutline
↳ HomeSolid
↳ IdentificationOutline
↳ IdentificationSolid
↳ InboxInOutline
↳ InboxInSolid
↳ InboxOutline
↳ InboxSolid
↳ InformationCircleOutline
↳ InformationCircleSolid
↳ KeyOutline
↳ KeySolid
↳ LibraryOutline
↳ LibrarySolid
↳ LightBulbOutline
↳ LightBulbSolid
↳ LightningBoltOutline
↳ LightningBoltSolid
↳ LinkOutline
↳ LinkSolid
↳ LocationMarkerOutline
↳ LocationMarkerSolid
↳ LockClosedOutline
↳ LockClosedSolid
↳ LockOpenOutline
↳ LockOpenSolid
↳ LoginOutline
↳ LoginSolid
↳ LogoutOutline
↳ LogoutSolid
↳ MailOpenOutline
↳ MailOpenSolid
↳ MailOutline
↳ MailSolid
↳ MapOutline
↳ MapSolid
↳ MenuAlt1Outline
↳ MenuAlt1Solid
↳ MenuAlt2Outline
↳ MenuAlt2Solid
↳ MenuAlt3Outline
↳ MenuAlt3Solid
↳ MenuAlt4Outline
↳ MenuAlt4Solid
↳ MenuOutline
↳ MenuSolid
↳ MicrophoneOutline
↳ MicrophoneSolid
↳ MinusCircleOutline
↳ MinusCircleSolid
↳ MinusOutline
↳ MinusSmOutline
↳ MinusSmSolid
↳ MinusSolid
↳ MoonOutline
↳ MoonSolid
↳ MusicNoteOutline
↳ MusicNoteSolid
↳ NewspaperOutline
↳ NewspaperSolid
↳ OfficeBuildingOutline
↳ OfficeBuildingSolid
↳ PaperAirplaneOutline
↳ PaperAirplaneSolid
↳ PaperClipOutline
↳ PaperClipSolid
↳ PauseOutline
↳ PauseSolid
↳ PencilAltOutline
↳ PencilAltSolid
↳ PencilOutline
↳ PencilSolid
↳ PhoneIncomingOutline
↳ PhoneIncomingSolid
↳ PhoneMissedCallOutline
↳ PhoneMissedCallSolid
↳ PhoneOutgoingOutline
↳ PhoneOutgoingSolid
↳ PhoneOutline
↳ PhoneSolid
↳ PhotographOutline
↳ PhotographSolid
↳ PlayOutline
↳ PlaySolid
↳ PlusCircleOutline
↳ PlusCircleSolid
↳ PlusOutline
↳ PlusSmOutline
↳ PlusSmSolid
↳ PlusSolid
↳ PresentationChartBarOutline
↳ PresentationChartBarSolid
↳ PresentationChartLineOutline
↳ PresentationChartLineSolid
↳ PrinterOutline
↳ PrinterSolid
↳ PuzzleOutline
↳ PuzzleSolid
↳ QrcodeOutline
↳ QrcodeSolid
↳ QuestionMarkCircleOutline
↳ QuestionMarkCircleSolid
↳ ReceiptRefundOutline
↳ ReceiptRefundSolid
↳ ReceiptTaxOutline
↳ ReceiptTaxSolid
↳ RefreshOutline
↳ RefreshSolid
↳ ReplyOutline
↳ ReplySolid
↳ RewindOutline
↳ RewindSolid
↳ RssOutline
↳ RssSolid
↳ SaveAsOutline
↳ SaveAsSolid
↳ SaveOutline
↳ SaveSolid
↳ ScaleOutline
↳ ScaleSolid
↳ ScissorsOutline
↳ ScissorsSolid
↳ SearchCircleOutline
↳ SearchCircleSolid
↳ SearchOutline
↳ SearchSolid
↳ SelectorOutline
↳ SelectorSolid
↳ ServerOutline
↳ ServerSolid
↳ ShareOutline
↳ ShareSolid
↳ ShieldCheckOutline
↳ ShieldCheckSolid
↳ ShieldExclamationOutline
↳ ShieldExclamationSolid
↳ ShoppingBagOutline
↳ ShoppingBagSolid
↳ ShoppingCartOutline
↳ ShoppingCartSolid
↳ SortAscendingOutline
↳ SortAscendingSolid
↳ SortDescendingOutline
↳ SortDescendingSolid
↳ SparklesOutline
↳ SparklesSolid
↳ SpeakerphoneOutline
↳ SpeakerphoneSolid
↳ StarOutline
↳ StarSolid
↳ StatusOfflineOutline
↳ StatusOfflineSolid
↳ StatusOnlineOutline
↳ StatusOnlineSolid
↳ StopOutline
↳ StopSolid
↳ SunOutline
↳ SunSolid
↳ SupportOutline
↳ SupportSolid
↳ SwitchHorizontalOutline
↳ SwitchHorizontalSolid
↳ SwitchVerticalOutline
↳ SwitchVerticalSolid
↳ TableOutline
↳ TableSolid
↳ TagOutline
↳ TagSolid
↳ TemplateOutline
↳ TemplateSolid
↳ TerminalOutline
↳ TerminalSolid
↳ ThumbDownOutline
↳ ThumbDownSolid
↳ ThumbUpOutline
↳ ThumbUpSolid
↳ TicketOutline
↳ TicketSolid
↳ TranslateOutline
↳ TranslateSolid
↳ TrashOutline
↳ TrashSolid
↳ TrendingDownOutline
↳ TrendingDownSolid
↳ TrendingUpOutline
↳ TrendingUpSolid
↳ TruckOutline
↳ TruckSolid
↳ UploadOutline
↳ UploadSolid
↳ UserAddOutline
↳ UserAddSolid
↳ UserCircleOutline
↳ UserCircleSolid
↳ UserGroupOutline
↳ UserGroupSolid
↳ UserOutline
↳ UserRemoveOutline
↳ UserRemoveSolid
↳ UserSolid
↳ UsersOutline
↳ UsersSolid
↳ VariableOutline
↳ VariableSolid
↳ VideoCameraOutline
↳ VideoCameraSolid
↳ ViewBoardsOutline
↳ ViewBoardsSolid
↳ ViewGridAddOutline
↳ ViewGridAddSolid
↳ ViewGridOutline
↳ ViewGridSolid
↳ ViewListOutline
↳ ViewListSolid
↳ VolumeOffOutline
↳ VolumeOffSolid
↳ VolumeUpOutline
↳ VolumeUpSolid
↳ WifiOutline
↳ WifiSolid
↳ XCircleOutline
↳ XCircleSolid
↳ XOutline
↳ XSolid
↳ ZoomInOutline
↳ ZoomInSolid
↳ ZoomOutOutline
↳ ZoomOutSolid

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 bundle

# then tag (make sure to push the commit/tag to GitHub and create a release)
npm version major|minor|patch

# Then publish!
npm publish
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].