Skip to main content

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​

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​

PropData TypeDefault ValueDescription
ExtendsRNTextProps--Inherits properties from RNTextProps
familyIconFamilyIoniconsVector icons family from vector-icons set
sizenumber24Size of the icon, can also be passed as fontSize in the style object.
namestring--Name of the icon to show
colornumber | ColorValue--Set custom icon color