React Native Unicons Icons

What is react-native-unicons?

react-native-unicons is a collection of simply beautiful open source icons for React Native. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

At its core, Unicons is a collection of SVG files. To use SVG files on React Native, react-native-svg is needed. This component contains "line" style Unicons icons converted and made compatible with react-native-svg package.

Based on Unicons Icons v4.0.0

Installation

1. Ensure sure you've installed react-native-svg
2. npm i react-native-unicons

Icons

List of available icons in this package. https://iconscout.com

Usage

To use icons as component, all icon names is formatted to Pascal Case. award-alt => <AwardAlt />

import { AwardAlt } from "react-native-unicons";

const App = () => {
  return <AwardAlt />;
};

Icons can be configured with inline props:

<AwardAlt stroke="red" fill="#fff" width={32} height={32} />

You can also include the whole icon pack:

import * as Icon from "react-native-unicons";

const App = () => {
  return <Icon.AwardAlt color="red" />;
};

Properties

Any Svg property and the following:

Prop	Description	Default
width	Width of the icon.	24
height	Height of the icon.	24
stroke	The stroke prop refers to the color outline the icon.	"currentColor"
strokeWidth	The strokeWidth prop specifies the width of the outline on the icon.	2
fill	The fill prop refers to the color inside the icon.	"currentColor"
color	The color inside the icon.	"currentColor"

Author

Vytenis

Contributors

Vytenis