Icon

Primitives

Ionicons wrapper with semantic size presets (xs → 2xl), theme color tokens, opacity control, and correct accessibility hiding for decorative icons.

GitHub

Installation

bash

npx native-mate add icon

npm deps: @expo/vector-icons

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Icon } from '~/components/ui/icon'

// Basic
<Icon name="home" />

// Sizes
<Icon name="star" size="xs" />  // 12dp
<Icon name="star" size="md" />  // 20dp (default)
<Icon name="star" size="xl" />  // 32dp
<Icon name="star" size={48} />  // custom

// Color tokens
<Icon name="checkmark-circle" color="success" size="lg" />
<Icon name="alert-circle"     color="warning" size="lg" />
<Icon name="close-circle"     color="destructive" size="lg" />
<Icon name="information-circle" color="primary" size="lg" />

// Custom color
<Icon name="heart" color="#f43f5e" size="xl" />

// Opacity
<Icon name="heart" color="#f43f5e" opacity={0.4} />

// Accessible (non-decorative)
<Icon
  name="trash"
  color="destructive"
  decorative={false}
  accessibilityLabel="Delete item"
/>

Props

Prop	Type	Default	Description
name	string	—	Any Ionicons icon name (e.g. "home", "heart-outline").
size	"xs"\|"sm"\|"md"\|"lg"\|"xl"\|"2xl"\|number	"md"	Preset (12/16/20/24/32/40 dp) or an explicit number.
color	"foreground"\|"muted"\|"primary"\|"destructive"\|"success"\|"warning"\|"border"\|string	"foreground"	Semantic token or raw color value.
opacity	number	1	Icon opacity (0–1).
decorative	boolean	true	When true, hidden from screen readers. Set false for interactive icons.
accessibilityLabel	string	—	Screen reader label. Required when decorative is false.

Example

tsx

import { Icon } from '~/components/ui/icon'
import { View } from 'react-native'

export function IconExamples() {
  return (
    <View style={{ gap: 12, padding: 16 }}>
      {/* Status icons */}
      <View style={{ flexDirection: 'row', gap: 12 }}>
        <Icon name="checkmark-circle" color="success"     size="xl" />
        <Icon name="alert-circle"     color="warning"     size="xl" />
        <Icon name="close-circle"     color="destructive" size="xl" />
        <Icon name="information-circle" color="primary"   size="xl" />
      </View>

      {/* Filled vs outline */}
      <View style={{ flexDirection: 'row', gap: 12 }}>
        <Icon name="heart"         color="primary" />
        <Icon name="heart-outline" color="primary" />
        <Icon name="star"          color="warning" />
        <Icon name="star-outline"  color="warning" />
      </View>

      {/* Dimmed */}
      <Icon name="lock-closed" color="muted" opacity={0.5} />
    </View>
  )
}

Accessibility

Feature	Detail
Decorative	Icons are hidden from VoiceOver/TalkBack by default (decorative=true). Pass decorative={false} + accessibilityLabel for meaningful icons.

Text

Spinner