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

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

npm

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

Usage

Specific icons:

1import React from "react";
2import { View } from "react-native";
3import { SparklesIcon } from "react-native-heroicons/solid";
4import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";
5// Old solid style from heroicons v1
6import { SparklesIcon as SparklesIconMini } from "react-native-heroicons/mini";
7
8const App = () => {
9  return (
10    <View>
11      <SparklesIcon />
12      <SparklesIconOutline />
13      <SparklesIconMini />
14    </View>
15  );
16};
17
18export default App;

Entire icon pack:

1import React from "react";
2import * as Icons from "react-native-heroicons/solid";
3
4const App = () => {
5  return <Icons.SparklesIcon />;
6};
7
8export default App;

Customization

Icons can be adjusted with the size prop (default: 24):

1import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";
2// ...
3<SparklesIconOutline color="red" fill="black" size={42} />;