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:

import React from "react";
import { View } from "react-native";
import { SparklesIcon as SparklesIconMicro } from "react-native-heroicons/micro";
// Old solid style from heroicons v1
import { SparklesIcon as SparklesIconMini } from "react-native-heroicons/mini";
import { SparklesIcon } from "react-native-heroicons/solid";
import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";

const App = () => {
  return (
    <View>
      <SparklesIconMicro />
      <SparklesIconMini />
      <SparklesIcon />
      <SparklesIconOutline />
    </View>
  );
};

export default App;

Entire icon pack:

import React from "react";
import * as Icons from "react-native-heroicons/solid";

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

export default App;

Customization

Icons can be adjusted with the size prop.

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

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