Skip to content
Docs
Components
Icon

Icon

Component to display icon, it's a wrapper around the Icon component from react-native-vector-icons library.

Import

import { Icon } from "react-native-ficus-ui";

Usage

Examples

EDITABLE EXAMPLE
<HStack spacing={10}>
  <Icon name="accessibility" color="blue.700" size="6xl" iconSet="Ionicons" />
  <Icon
    name="star"
    color="yellow.700"
    size="6xl"
    iconSet="Ionicons"
  />
</HStack>

Sizes

EDITABLE EXAMPLE
<HStack spacing={10}>
  <Icon name="alarm" color="red.500" size="md"  />
  <Icon name="analytics" color="teal.500" size="xl" />
  <Icon name="heart" color="red.500" size="2xl" />
  <Icon name="brush" color="blue.700" size="6xl" />
</HStack>

Back button

EDITABLE EXAMPLE
<Icon
  bg="yellow.400"
  p={15}
  borderRadius="full"
  name="arrow-back"
  color="yellow.700"
  size="2xl"
  iconSet="Ionicons"
  w={50}
/>

Props

Extends every Box

name

The name property (`name` style prop in StyleSheet).

TypeRequiredDefault
stringYes

color

The color property (`color` style prop in StyleSheet).

TypeRequiredDefault
stringNogray.800

size

The size property.

TypeRequiredDefault
string, numberNo

iconSet

The iconSet to use for the Icon

TypeRequiredDefault
stringNoIonicons