Skip to main content

Icon

This component allows you to easily incorporate icons into your user interface. It supports popular icon libraries like "react-native-vector-icons" and "react-native-sfSymbols," making it simple to add and customize icons in your app for a polished look and feel.

Light Theme

Usage​

import React from "react";

// React Native UI DevKit
import { Icon } from "react-native-ui-devkit";

const App = () => {
    return (<Icon name='home' type='antdesign' size={23} color={'#000000'} />)
};

export default App;

Props​

name​

Defines the icon name.
See the gallery at react-native-vector-icons directory

If you are using sfsymbols in the icon type, you must enter the name through SF Symbols on Mac OS

Type: string​

type​

This property receives an interface for configuring the item.

Type: string​

  • antdesign

    AntDesign by AntFinance (298 icons)

    Type: string​

  • entypo

    Entypo by Daniel Bruce (v1.0.1 411 icons)

    Type: string​

  • evilicons

    Evil Icons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons)

    Type: string​

  • feather

    Feather by Cole Bemis & Contributors (v4.28.0, 286 icons)

    Type: string​

  • font-awesome

    Font Awesome by Dave Gandy (v4.7.0, 675 icons)

    Type: string​

  • font-awesome5

    Font Awesome 5 by Fonticons, Inc. (v5.15.3, 1598 (free) 7848 (pro) icons)

    Type: string​

  • font-awesome5pro

    Font Awesome 5 Pro

    Type: string​

  • fontisto

    Fontisto by Kenan Gündoğan (v3.0.4, 615 icons)

    Type: string​

  • foundation

    Foundation by ZURB, Inc. (v3.0, 283 icons)

    Type: string​

  • ionicons

    Ionicons by Ionic (v7.1.0, 1338 icons)

    Type: string​

  • material

    Material by Google, Inc. (v4.0.0, 2189 icons)

    Type: string​

  • material-community

    Material Community by MaterialDesignIcons.com (v6.5.95, 6596 icons)

    Type: string​

  • octicons

    Octicons by Github, Inc. (v16.3.1, 250 icons)

    Type: string​

  • zocial

    Zocial by Sam Collins (v1.4.0, 100 icons)

    Type: string​

  • simplelineicons

    Simple Line Icons by Sabbir & Contributors (v2.5.5, 189 icons)

    Type: string​

  • sfsymbol iOS 15+

    SF Symbols by Apple (v4.0, 4.491 icons)

    Type: string​

size (optional)​

Sets the icon size.

Type: number​

color (optional)​

Sets the icon color.

Type: string​

animation (optional)​

Defines the type of animation.

Type: bounce flash jello pulse rotate rubberBand shake swing tada wobble bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight fadeIn fadeInDown fadeInDownBig fadeInUp fadeInUpBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeOut fadeOutDown fadeOutDownBig fadeOutUp fadeOutUpBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut slideInDown slideInUp slideInLeft slideInRight slideOutDown slideOutUp slideOutLeft slideOutRight zoomIn zoomInDown zoomInUp zoomInLeft zoomInRight zoomOut zoomOutDown zoomOutUp zoomOutLeft zoomOutRight​

iterationCount (optional)​

Sets the animation loop.

Type: number infinite​

style (optional)​

Set a custom style for the icon.

Type: ViewStyle​

weight (optional)​

Sets the icon weight.

Only supported iOS.

Type: SymbolWeight​

scale (optional)​

Sets the icon scale.

Only supported iOS.

Type: SymbolScale​

resizeMode (optional)​

Sets the icon resizeMode.

Only supported iOS.

Type: SymbolResizeMode​

multicolor (optional)​

Sets the icon multicolor.

Only supported iOS.

Type: boolean​

badge (optional)​

Defines a small circle that displays a number or text and will be displayed on the right side of the item.

Type: IBadge​

Type Definitions​

badge​

Defines a small circle that displays a number or text and will be displayed on the right side of the item.

Type: object​

{
  value: string, // Determines the value to be printed inside the badge.
  // Setting text and badge colors
  color: {
    text: string, // Sets the text color
    badge: string // Sets the badge color
  }
}