https://github.com/ecklf/react-native-heroicons
React Native components for heroicons
https://github.com/ecklf/react-native-heroicons
Last synced: about 1 year ago
JSON representation
React Native components for heroicons
- Host: GitHub
- URL: https://github.com/ecklf/react-native-heroicons
- Owner: ecklf
- License: mit
- Created: 2020-05-12T11:27:46.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-02-21T00:06:50.000Z (over 2 years ago)
- Last Synced: 2025-03-29T15:11:23.803Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://heroicons.com
- Size: 915 KB
- Stars: 140
- Watchers: 2
- Forks: 14
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-native-heroicons)
[](https://www.npmjs.com/package/react-native-heroicons)
# React Native Heroicons
Heroicons are designed by [Steve Schoger](https://twitter.com/steveschoger) and published by [Tailwind Labs](https://github.com/tailwindlabs/heroicons).
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
```sh
yarn add react-native-heroicons react-native-svg
```
### npm
```sh
npm i react-native-heroicons react-native-svg
```
## Usage
Specific icons:
```tsx
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 (
);
};
export default App;
```
Entire icon pack:
```tsx
import React from "react";
import * as Icons from "react-native-heroicons/solid";
const App = () => {
return ;
};
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`):
```tsx
import { SparklesIcon as SparklesIconOutline } from "react-native-heroicons/outline";
// ...
;
```