Icon

Wrapper around react-native-vector-icons with extended support for all icon families.
Allows consistent theming, sizing, and color management across Blossom UI components.

Usage Playground

Size

Name

Color

Code Snippet

import { Icon } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <Icon/>
        );
    }

Usage



function IconUsage() {
  return (
    <View>
      <Icon name="add" size={24} />
    </View>
  )
}

Status













function IconStatuses() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Icon status="primary" name="add" size={24} />
      <Icon status="accent" name="add" size={24} />
      <Icon status="success" name="add" size={24} />
      <Icon status="info" name="add" size={24} />
      <Icon status="warning" name="add" size={24} />
      <Icon status="error" name="add" size={24} />
    </View>
  )
}

Size

Control the size (width/height) of the icon







function IconSizes() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Icon name="add" size={24} />
      <Icon name="add" size={48} />
      <Icon name="add" size={100} />
    </View>
  )
}

Family

Use the family prop to switch between different icon sets supported by react-native-vector-icons.

󱑤



󰋜

function IconFamily() {
  return (
    <View row style={{justifyContent: 'space-evenly'}}>
      <Icon family="MaterialCommunityIcons" name="download-circle" size={48} />
      <Icon family="Ionicons" name="add" size={48} />
      <Icon family="MaterialCommunityIcons" name="home" size={48} />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	RNTextProps	--	Inherits properties from RNTextProps
family	IconFamily	Ionicons	Vector icons family from vector-icons set
size	number	24	Size of the icon, can also be passed as fontSize in the style object.
name	string	--	Name of the icon to show from the given family
color	ColorValue	--	Set custom icon color to the icon