React Native Heroicons

Heroicons are designed by Steve Schoger and published by Tailwind Labs.

A full directory of all available icons can be found here:

https://heroicons.com/

Installation

react-native-heroicons requires react-native-svg v9 or higher

yarn

yarn add react-native-heroicons react-native-svg

npm

npm i react-native-heroicons react-native-svg

Usage

Specific icons:

importReactfrom"react";import{View}from"react-native";import{SparklesIconasSparklesIconMicro}from"react-native-heroicons/micro";// Old solid style from heroicons v1import{SparklesIconasSparklesIconMini}from"react-native-heroicons/mini";import{SparklesIcon}from"react-native-heroicons/solid";import{SparklesIconasSparklesIconOutline}from"react-native-heroicons/outline";constApp=()=>{return(<View><SparklesIconMicro/><SparklesIconMini/><SparklesIcon/><SparklesIconOutline/></View>);};exportdefaultApp;

Entire icon pack:

importReactfrom"react";import*asIconsfrom"react-native-heroicons/solid";constApp=()=>{return<Icons.SparklesIcon/>;};exportdefaultApp;

Customization

Icons can be adjusted with the size prop.

Defaults are 16 for micro, 20 for mini and 24 for solid/outline):

import{SparklesIconasSparklesIconOutline}from"react-native-heroicons/outline";// ...<SparklesIconOutlinecolor="red"fill="black"size={42}/>;