Use iconic font in a simple way.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.


Use iconic font in a simple way.


Notice: Android added custom font support in v0.16, so make sure your native dependency is above it:

compile 'com.facebook.react:react-native:0.16.+'

  1. install module
    npm install --save react-native-iconic-font

step 2 and 3 are same as official way to use custom font.

  1. copy font file

  2. import to use

var icon = require('react-native-iconic-font/fontawesome');


  render: function() {
  //FontFamily perproty value must same as font file name.
    return (
       <Text style={{fontFamily: 'fontawesome',fontSize:30}}> 

Reload js and you'll see the icon there.

##Icon Fonts

In fact, it will be so easy to use any iconic font after you read this article.

What's the difference?

There are already some good solutions to use iconic font :

But ... these libraries all require native code and/or native project config file modifications.
Believe me, it confused many javascript developers who are familar with 'native code'.
That's why i start this project .
No native code. Let's try to use pure javascript!


A font system is basically a 'character-graph' mapping.
In a web page, CSS rules deal with webfonts like this:

<i class="fa-twitter">
==CSS rules==> .fa-twitter:before{content: "\f099";} 
                                 ==font system==>  a twitter graph

It's the same process in React Native except the CSS rules. That's what this project does. Mapping names to characters.

Besides I created a command tool to transform a CSS file to these mapping module.

Run one command to generate the js module
iconmap -f test/font-awesome-v4.4.0.css -p '^\.fa-([a-z0-9-]+?):before$'
Read more:



* add material-design-icons