Icons for React Native

react-native-ico

20000 Icons for React Native

v.44.7.4

List of Icons

List of all packs

Usage

import Icon from 'react-native-ico';


// Inside some view component
render() {
    return (
        <Fragment>
          <Icon name="heart" />
          <Icon name="home" group="font-awesome" />
          <Icon name="speaker" height="40" width="40" />
          <Icon name="essential/trash" color="red" />
          <Icon name="home" background="circle" />
          <Icon name="home" background={{ type: "button", color: 'green' }} />
          <Icon name="home" badge="10" />
          <Icon name="home" badge={{value: 'A', fontSize: 25, radius: 22, position:'top_left', color:'orange', backgroundColor:'blue'}}/>
        </Fragment>
    );
}

Installation

yarn

yarn add react-native-ico react-native-svg

npm

npm install --save react-native-ico react-native-svg

Link react-native-svg

react-native link react-native-svg

pod install ( for iOS )

cd ios && pod install && cd ..

API

<Icon name [group color width height background badge ...rest] />

Returns a SvgXml icon by name and group.

name	optional	default value	description	examples
name	no		name of file in selected group, can contain group name before '/' sign	"home", "font-awesome/home"
group	yes	default	name of the group	"essential"
color	yes		line color, css style	"#00ff00", "#0f0", "green"
width	yes	20	width of the icon	40
height	yes	20	height of the icon	40
background	no		background type	"circle"
background	no		background object	{type: "circle", color: 'yellow'}
badge	no		badge string	"10"
badge	no		badge object	{value: 'A', fontSize: 25, radius: 22, position:'top_left', color:'orange', backgroundColor:'blue'}
...rest	no		other props	style={{backgroundColor: "#00f"}}

Example

// App.js
import React from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View } from 'react-native';
import Icon from 'react-native-ico';

class App extends React.Component {
  
  render() {

  return (
    <>
      <SafeAreaView>
        <ScrollView contentInsetAdjustmentBehavior="automatic">
          <View>

<View style={{flex:1, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', justifyContent:'space-between', padding:20}}>
<Icon name="speech-bubble-1" group="balloons" height="80" width="80" background="circle" />
<Icon name="speech-bubble-10" group="balloons" height="80" width="80" badge="3" background={{type: "circle", color: 'yellow'}}/>
<Icon name="speech-bubble-11" group="balloons" height="80" width="80" badge={{value: 'A', fontSize: 25, radius: 22, position:'top_left', color:'orange', backgroundColor:'blue'}}/>
<Icon name="contacs" group="basic" height="80" width="80" badge="10" background="rect" />
<Icon name="aim" group="basic" height="80" width="80" background={{type:'rect', color:'red', borderRadius:122}} />
<Icon name="clock" group="basic" height="80" width="80" badge="5" background={true} />
<Icon name="contacs" group="basic" height="80" width="80" background="button" />
<Icon name="contacs" group="basic" height="80" width="80" background={{ type: "button", color: 'green' }} />
<Icon name="speech-bubble-1" group="balloons" height="80" width="80" />
<Icon name="speech-bubble-10" group="balloons" height="80" width="80" />
<Icon name="speech-bubble-11" group="balloons" height="80" width="80" />
<Icon name="contacs" group="basic" height="80" width="80" />
<Icon name="aim" group="basic" height="80" width="80" />
<Icon name="clock" group="basic" height="80" width="80" />
<Icon name="share-1" group="business" height="80" width="80" />
<Icon name="idea-2" group="business" height="80" width="80" />
<Icon name="thinking" group="business" height="80" width="80" />
<Icon name="list-1" group="christmas" height="80" width="80" />
<Icon name="list" group="christmas" height="80" width="80" />
<Icon name="zambomba" group="christmas" height="80" width="80" />
<Icon name="airplane-black-shape" group="coolicons" height="80" width="80" />
<Icon name="alphabetical-order-from-a-to-z" group="coolicons" height="80" width="80" />
<Icon name="ambulance" group="coolicons" height="80" width="80" />
<Icon name="abt" group="cryptocurrency" height="80" width="80" />
<Icon name="act" group="cryptocurrency" height="80" width="80" />
<Icon name="actn" group="cryptocurrency" height="80" width="80" />
<Icon name="airpods-alt" group="dazzle-line" height="80" width="80" />
<Icon name="airpods" group="dazzle-line" height="80" width="80" />
<Icon name="alarm-clock-alt" group="dazzle-line" height="80" width="80" />
<Icon name="leftArrow" group="default" height="80" width="80" />
<Icon name="menu" group="default" height="80" width="80" />
<Icon name="question" group="default" height="80" width="80" />
<Icon name="battery-with-recycle-symbol" group="ecologism" height="80" width="80" />
<Icon name="corn" group="ecologism" height="80" width="80" />
<Icon name="danger-signal" group="ecologism" height="80" width="80" />
<Icon name="a-button" group="emojione-emojis" height="80" width="80" />
<Icon name="ab-button" group="emojione-emojis" height="80" width="80" />
<Icon name="admission-tickets" group="emojione-emojis" height="80" width="80" />
<Icon name="a-button" group="emojione-emojis-mono" height="80" width="80" />
<Icon name="ab-button" group="emojione-emojis-mono" height="80" width="80" />
<Icon name="admission-tickets" group="emojione-emojis-mono" height="80" width="80" />
<Icon name="add" group="essential" height="80" width="80" />
<Icon name="agenda" group="essential" height="80" width="80" />
<Icon name="alarm-1" group="essential" height="80" width="80" />
<Icon name="folder-41" group="file-folder" height="80" width="80" />
<Icon name="outbox" group="file-folder" height="80" width="80" />
<Icon name="text" group="file-folder" height="80" width="80" />
<Icon name="slovenia" group="flags" height="80" width="80" />
<Icon name="puerto-rico" group="flags" height="80" width="80" />
<Icon name="mozambique" group="flags" height="80" width="80" />
<Icon name="align-to-left" group="font-awesome" height="80" width="80" />
<Icon name="align-to-right" group="font-awesome" height="80" width="80" />
<Icon name="ambulance" group="font-awesome" height="80" width="80" />
<Icon name="aubergine" group="gastronomy-set" height="80" width="80" />
<Icon name="avocado" group="gastronomy-set" height="80" width="80" />
<Icon name="bacon" group="gastronomy-set" height="80" width="80" />
<Icon name="archive-12" group="interaction" height="80" width="80" />
<Icon name="archive-13" group="interaction" height="80" width="80" />
<Icon name="archive-14" group="interaction" height="80" width="80" />
<Icon name="24-hours-room-service" group="lodgicons" height="80" width="80" />
<Icon name="24-hours-sign" group="lodgicons" height="80" width="80" />
<Icon name="3-persons-or-person-number-three-symbol" group="lodgicons" height="80" width="80" />
<Icon name="application" group="logistics-delivery" height="80" width="80" />
<Icon name="bill" group="logistics-delivery" height="80" width="80" />
<Icon name="box" group="logistics-delivery" height="80" width="80" />
<Icon name="windows-media-player" group="logo" height="80" width="80" />
<Icon name="wechat" group="logo" height="80" width="80" />
<Icon name="waze" group="logo" height="80" width="80" />
<Icon name="adyen" group="logos" height="80" width="80" />
<Icon name="aerospike-icon" group="logos" height="80" width="80" />
<Icon name="aerospike" group="logos" height="80" width="80" />
<Icon name="add-label-button" group="material-design" height="80" width="80" />
<Icon name="add-plus-button" group="material-design" height="80" width="80" />
<Icon name="add-to-queue-button" group="material-design" height="80" width="80" />
<Icon name="airbnb" group="mingcute-tiny-bold-filled" height="80" width="80" />
<Icon name="airplane" group="mingcute-tiny-bold-filled" height="80" width="80" />
<Icon name="airplay" group="mingcute-tiny-bold-filled" height="80" width="80" />
<Icon name="right-arrow" group="miscellaneous" height="80" width="80" />
<Icon name="diagonal-arrow" group="miscellaneous" height="80" width="80" />
<Icon name="diagonal-arrow-1" group="miscellaneous" height="80" width="80" />
<Icon name="3d" group="modern-ui" height="80" width="80" />
<Icon name="acorn" group="modern-ui" height="80" width="80" />
<Icon name="add-multiple" group="modern-ui" height="80" width="80" />
<Icon name="santa-claus" group="new-year" height="80" width="80" />
<Icon name="candelabra" group="new-year" height="80" width="80" />
<Icon name="star" group="new-year" height="80" width="80" />
<Icon name="a-button-blood-type" group="noto-emojis" height="80" width="80" />
<Icon name="ab-button-blood-type" group="noto-emojis" height="80" width="80" />
<Icon name="abacus" group="noto-emojis" height="80" width="80" />
<Icon name="western-union-1" group="payment-method" height="80" width="80" />
<Icon name="western-union" group="payment-method" height="80" width="80" />
<Icon name="wepay" group="payment-method" height="80" width="80" />
<Icon name="4g" group="phones-and-mobiles" height="80" width="80" />
<Icon name="4g plus" group="phones-and-mobiles" height="80" width="80" />
<Icon name="4g" group="phones-and-mobiles" height="80" width="80" />
<Icon name="alert-box" group="pixel" height="80" width="80" />
<Icon name="alert-circle-fill" group="pixel" height="80" width="80" />
<Icon name="alert-circle" group="pixel" height="80" width="80" />
<Icon name="all-for-one" group="rpg-game" height="80" width="80" />
<Icon name="alligator-clip" group="rpg-game" height="80" width="80" />
<Icon name="ammo-bag" group="rpg-game" height="80" width="80" />
<Icon name="anxious-face-with-sweat" group="sensa-emoji-vectors" height="80" width="80" />
<Icon name="astonished-face" group="sensa-emoji-vectors" height="80" width="80" />
<Icon name="avocado" group="sensa-emoji-vectors" height="80" width="80" />
<Icon name="invoice" group="shopping" height="80" width="80" />
<Icon name="shopping-cart" group="shopping" height="80" width="80" />
<Icon name="shopping-cart-1" group="shopping" height="80" width="80" />
<Icon name="15-s-for-menu" group="sign-and-symbols" height="80" width="80" />
<Icon name="16-weather-illustrations" group="sign-and-symbols" height="80" width="80" />
<Icon name="1st-place-37" group="sign-and-symbols" height="80" width="80" />
<Icon name="56-social-logo" group="social-icons" height="80" width="80" />
<Icon name="ads-of-the-world-logo" group="social-icons" height="80" width="80" />
<Icon name="ads-scuttlepad-logo" group="social-icons" height="80" width="80" />
<Icon name="56-social-logo" group="social-icons-rounded" height="80" width="80" />
<Icon name="ads-of-the-world-logo" group="social-icons-rounded" height="80" width="80" />
<Icon name="ads-scuttlepad-logo" group="social-icons-rounded" height="80" width="80" />
<Icon name="wikipedia" group="social-media" height="80" width="80" />
<Icon name="whatsapp" group="social-media" height="80" width="80" />
<Icon name="vine" group="social-media" height="80" width="80" />
<Icon name="docker" group="software-development" height="80" width="80" />
<Icon name="python" group="software-development" height="80" width="80" />
<Icon name="react" group="software-development" height="80" width="80" />
<Icon name="bikini" group="stylish" height="80" width="80" />
<Icon name="blush-makeup-circular-opened-case" group="stylish" height="80" width="80" />
<Icon name="bottle-black-and-rounded-shape" group="stylish" height="80" width="80" />
<Icon name="add-song-interface-symbol" group="supraicons" height="80" width="80" />
<Icon name="add-to-cart-commercial-symbol" group="supraicons" height="80" width="80" />
<Icon name="add-to-shopping-cart-e-commerce-symbol" group="supraicons" height="80" width="80" />
<Icon name="t-mobile" group="technology-logos" height="80" width="80" />
<Icon name="oppo" group="technology-logos" height="80" width="80" />
<Icon name="asus" group="technology-logos" height="80" width="80" />
<Icon name="ford" group="transport-logos" height="80" width="80" />
<Icon name="mini" group="transport-logos" height="80" width="80" />
<Icon name="porsche" group="transport-logos" height="80" width="80" />
<Icon name="bar-chart" group="ui-interface" height="80" width="80" />
<Icon name="wifi" group="ui-interface" height="80" width="80" />
<Icon name="key" group="ui-interface" height="80" width="80" />
<Icon name="arrow-pointing-to-left" group="universalicons" height="80" width="80" />
<Icon name="arrow-turning-to-right" group="universalicons" height="80" width="80" />
<Icon name="arrows-circle" group="universalicons" height="80" width="80" />
</View>
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
  }
};

export default App;

Example

// App.js
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import Icon from 'react-native-ico';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}><Icon name="heart" color="red" />  Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}><Icon group="essential" name="like" />  See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}><Icon name="edit" />  Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}><Icon name="menu/Quiz" />  Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

Created by

Dimitry Ivanov 2@ivanoff.org.ua # curl -A cv ivanoff.org.ua

react-native-ico

Icons for React Native

react-native-ico

List of Icons

Usage

Installation

yarn

npm

Link react-native-svg

pod install ( for iOS )

API

<Icon name [group color width height background badge ...rest] />

Example

Example

Created by

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

react-native-ico

Icons for React Native

react-native-ico

List of Icons

Usage

Installation

yarn

npm

Link react-native-svg

pod install ( for iOS )

API

<Icon name [group color width height background badge ...rest] />

Example

Example

Created by

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads