Package Exports

react-native-heroicons/mini
react-native-heroicons/mini/esm/index.js
react-native-heroicons/mini/index.js
react-native-heroicons/outline
react-native-heroicons/outline/esm/index.js
react-native-heroicons/outline/index.js
react-native-heroicons/solid
react-native-heroicons/solid/esm/index.js
react-native-heroicons/solid/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-heroicons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: 24):

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