Hero Icons for React Native

Overview

🫡 React Native Hero Icons

import { HeroOutline } from '@nandorojo/heroicons'

export const Icon = () => <HeroOutline.AcademicCap />

Overview

  • 😎 Free, beautiful icons
  • 🔥 Customizable with react-native-svg props
  • 🌲 Tree-shaken components
  • 🤖 TypeScript support
  • 📈 JS-only (+ works with Expo)

About HeroIcons

Heroicons is an awesome icon set made by the creators of Tailwind CSS . This library exports React Native components for each of its free icons, since their repo only supports React and Vue.

Example

See the example snack 🍔 .

Inspiration

This is a fork of my similar iconic icon set for React Native: https://github.com/nandorojo/react-native-iconic

Installation

yarn add @nandorojo/heroicons react-native-svg

Usage

There are 2 ways to import the icons:

Import the Icons

1. Single import

import { HeroOutline, HeroSolid, HeroSolid20 } from '@nandorojo/heroicons'

export const Icon = () => <HeroOutline.AcademicCap />

2. Tree-shaken import

Alternatively, you could import the icons individually.

While method 1 should tree shake since it's configured to use ESM with tree shaking optimizations, this import method is a safer bet if you're concerned about tree shaking.

import { AcademicCap } form '@nandorojo/heroicons/24/outline'

export const Icon = () => <AcademicCap />

The import paths are 20/solid, 24/solid, & 24/outline.

You can also import * as HeroOutline:

import * as HeroOutline from '@nandorojo/heroicons/24/outline'

export const Icon = () => <HeroOutline.AcademicCap />

For a full directory of components, see the Hero Icons website.

Custom color

">
<AcademicCap color="black" />

Custom size

<AcademicCap height={30} width={30} />

Props

Each icon component accepts all the props from react-native-svg's Svg component. Reference their docs.

How it works

This library uses react-native-svg. The components are generated by svgr. I downloaded all the free icons from heroicons and ran a script to codegen the files from there.

Contributing

Since Heroicons updates their icons somewhat frequently, you may want to import the new ones. These are the steps to update this library with new icons:

  1. Fork this repo
  2. Download the full folder of free icons from heroicons.com's GitHub repository
  3. Replace the generate/hero/optimized folder with the the optimized folder from their repository
  4. Run yarn install and yarn prepare
  5. Commit your changes, and open a PR!

Why

There weren't any answers on this discussion so I decided to make it myself.

PS after building this, I found this similar library too.

You might also like...
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.
A pack of more than 480 beautifully crafted Open Source icons. SVG, Sketch, Web Font and Animations support.

Eva Icons Eva Icons is a pack of more than 480 beautifully crafted Open Source icons for common actions and items. Additionally, Eva Icons supports 4

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

SVG library for React Native, React Native Web, and plain React web projects.
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components
PicPay Application using React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient and styled-components

React Native - PicPay Aplicação PicPay usando React Native, Expo, @react-navigation/native, @react-navigation/bottom-tabs, expo-linear-gradient e styl

Owner
Fernando Rojo
CTO @ BeatGig. Y Combinator W'19. Founder @ PATOS. UPenn.
Fernando Rojo
React Native - Native Animated Icons with different states

ReactNative: Native Iconic (Android/iOS): Deprecated Due to time constraint, this library is deprecated and not maintained anymore, You can still use

Pranav Raj Singh Chauhan 222 Jul 14, 2022
Quick and easy icons in React Native

WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons There's far bigger problems to so

Cory Smith 1.2k Oct 26, 2022
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 16.3k Dec 4, 2022
icons for react-native android using android-iconify

react-native-android-iconify icons for react native android using android-iconify Installation and How to use Step 1 - NPM Install npm install --save

Layton Whiteley 32 May 26, 2020
⭐Eva Icons for React Native

react-native-eva-icons ❤️ Clean and powerful Eva Icons implementation for React Native based on react-native-svg elements. Demo Installation npm i rea

Artur Yorsh 183 Nov 26, 2022
A simple rating library for react native supporting: decimal points, direction aware icons, custom icon set from Ionicons, custom images and record rating given by users.

React Native Rating Element A simple rating library for react native supporting: a11y ready ⚛️ decimal points like 3.7, 4.2 etc, direction aware icons

Rishabh Sharma 20 Sep 29, 2022
Credit cards and other payment icons in React Native

react-native-payment-icons There wasn't a package for displaying credit cards and other payment methods icons in React Native. Wasn't! We use SVGs tha

Henrique Bruno 11 Oct 25, 2022
Phosphor Icons generated from React Native Vector Image

React Native Phosphor Icons Phosphor Icons generated from React Native Vector Image Installation yarn add @baronha/react-native-phosphor-icon && yarn

Baron Ha. 3 May 6, 2022
🎨 Iconic icons for React Native (+Web)

Iconic is an awesome icon set made by @jamesm and @ormanclark. It has 200+ free icons and a premium plan. This library exports React Native components for each of its free icons.

Fernando Rojo 55 Nov 4, 2022
With React-Icomoon you can easily use the icons you have selected or created in icomoon.

React-IcoMoon ?? Zero Dependencies With React-Icomoon you can easily use the icons you have selected or created in icomoon. Demo Install npm install r

Aykut Kardaş 143 Nov 25, 2022