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
}
}