React Native Icons
A React Native wrapper on top of [https://github.com/PrideChung/FontAwesomeKit].
Currently we support 5 different icon fonts and 2444 icons.
- FontAwesome 4.4 Contains 585 icons
- ionicons 2.0.0 Contains 733 icons, lots of iOS 7 style outlined icons.
- Foundation icons Contains 283 icons.
- Zocial Contains 99 social icons.
- Material design icons Contains 744 social icons.
An icon has a name, size, and a color (optional)
Getting started
npm install react-native-icons@latest --save
- In XCode, in the project navigator right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-icons
➜ios
and addReactNativeIcons.xcodeproj
- Add
libReactNativeIcons.a
(from 'Products' under ReactNativeIcons.xcodeproj) to your project'sBuild Phases
➜Link Binary With Libraries
phase - Add the font files you want to use into the
Copy Bundle Resources
build phase of your project (click the '+' and click 'Add Other...' then choose the font files fromnode_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit
). - Run your project (
Cmd+R
)
Notes
- You only need to include the icon font files you want to use
- Icon style must set a width and height, or the icon will not be visible
- You may need to restart your node server for the icon font files to be included.
Example of icons
var { Icon, } = require('react-native-icons');
<Icon
name='ion|beer'
size={150}
color='#887700'
style={styles.beer}
/>
<Icon
name='zocial|github'
size={70}
color='black'
style={styles.github}
/>
<Icon
name='fontawesome|facebook-square'
size={70}
color='#3b5998'
style={styles.facebook}
/>
<Icon
name='foundation|lightbulb'
size={30}
color='#777777'
style={styles.lightbulb}
/>
<Icon
name='material|face'
size={30}
color='#333333'
style={styles.face}
/>
Stacked icons
<Icon
name='fontawesome|square'
size={80}
color='#55acee'
style={styles.twitterOutline}>
<Icon
name='fontawesome|twitter'
size={50}
color='#ffffff'
style={styles.twitterIcon}/>
</Icon>
Custom tab bar
var { TabBarIOS, } = require('react-native-icons');
var TabBarItemIOS = TabBarIOS.Item;
var Example = React.createClass({
getInitialState: function() {
return {
selectedTab: 'home',
notifCount: 0,
presses: 0,
};
},
render: function () {
return (
<TabBarIOS
selectedTab={this.state.selectedTab}
tintColor={'#c1d82f'}
barTintColor={'#000000'}
styles={styles.tabBar}>
<TabBarItemIOS
name="home"
iconName={'ion|ios-home-outline'}
title={''}
iconSize={32}
accessibilityLabel="Home Tab"
selected={this.state.selectedTab === 'home'}
onPress={() => {
this.setState({
selectedTab: 'home',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
<TabBarItemIOS
name="articles"
iconName={'ion|ios-paper-outline'}
title={''}
iconSize={32}
accessibilityLabel="Articles Tab"
selected={this.state.selectedTab === 'articles'}
onPress={() => {
this.setState({
selectedTab: 'articles',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
<TabBarItemIOS
name="messages"
iconName={'ion|chatboxes'}
title={''}
iconSize={32}
accessibilityLabel="Messages Tab"
selected={this.state.selectedTab === 'messages'}
onPress={() => {
this.setState({
selectedTab: 'messages',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
<TabBarItemIOS
name="settings"
iconName={'ion|ios-gear'}
title={''}
iconSize={32}
accessibilityLabel="Settings Tab"
selected={this.state.selectedTab === 'settings'}
onPress={() => {
this.setState({
selectedTab: 'settings',
});
}}>
{this._renderContent()}
</TabBarItemIOS>
</TabBarIOS>
);
}
});