🎨 React Native Iconic

import { AnnotationDots } from '@nandorojo/iconic'

export const Icon = () => <AnnotationDots />

Overview

• 😎 Free, beautiful icons
• 🔥 Customizable with react-native-svg props
• 🌲 Tree-shaken components
• 🤖 TypeScript support
• 📈 JS-only (+ works with Expo)

About Iconic

Iconic is an awesome icon set made by @jamesm and @ormanclark. It has 200+ free icons and a premium plan. This library exports React Native components for each of its free icons.

Example

See the example snack 🍔.

Installation

yarn add @nandorojo/iconic react-native-svg

Usage

Each icon is exported as its own component with an adjusted name.

For example, to use the arrow-down icon, import ArrowDown:

import { ArrowDown } from '@nandorojo/iconic'

You can also import * as Iconic:

import * as Iconic from '@nandorojo/iconic'

export const Icon = () => <Iconic.ArrowDown />

For a full directory of components, see the Iconic website.

Custom color

<ArrowUp color="black" />

Custom size

<ArrowUp height={30} width={30} />

Props

Each icon component accepts all the props from react-native-svg's Svg component. Reference their docs.

How it works

This library uses react-native-svg. The components are generated by svgr. I downloaded all the free icons from iconic.app and ran a script to codegen the files from there.

Contributing

Since Iconic updates their icons somewhat frequently, you may want to import the new ones. These are the steps to update this library with new icons:

1. Fork this repo
2. Download the full folder of free icons from iconic.app
3. Replace the generate/iconic/svg folder with the the svg folder you downloaded
4. Run yarn install and yarn prepare
5. Commit your changes, and open a PR!