Typography Components
Components for rendering text and icons with consistent styling from the theme system.
import { Icon, Text } from '@/common/components';Icon
A themed wrapper around @expo/vector-icons/Ionicons with 6 semantic color variants and named size presets. Used throughout the component library for consistent iconography.
Basic Usage
<Icon name="home-outline" />
<Icon name="settings-outline" variant="secondary" />
<Icon name="heart" variant="accent" />Semantic Variants
Each variant maps to a theme icon color token, ensuring icons adapt to light and dark modes automatically.
<Icon name="person-outline" variant="primary" /> {/* Default -- main content color */}
<Icon name="time-outline" variant="secondary" /> {/* Reduced emphasis */}
<Icon name="help-outline" variant="tertiary" /> {/* Even less emphasis */}
<Icon name="ellipsis-horizontal" variant="muted" /> {/* Subtle, decorative */}
<Icon name="checkmark" variant="inverse" /> {/* For use on colored backgrounds */}
<Icon name="star" variant="accent" /> {/* Teal accent color */}Sizing
You can use either a numeric pixel size or a named size variant from the theme.
{/* Numeric size */}
<Icon name="alert-circle" size={32} />
{/* Named size variants */}
<Icon name="arrow-back" sizeVariant="xs" /> {/* Extra small */}
<Icon name="arrow-back" sizeVariant="sm" /> {/* Small */}
<Icon name="arrow-back" sizeVariant="md" /> {/* Medium */}
<Icon name="arrow-back" sizeVariant="lg" /> {/* Large */}
<Icon name="arrow-back" sizeVariant="xl" /> {/* Extra large */}When both size and sizeVariant are provided, sizeVariant takes precedence since it is derived from theme metrics and scales consistently across devices.
Custom Color
Override the theme variant with a specific color value. Useful for one-off cases.
<Icon name="flame" color="#FF6B35" />Destructive
Renders the icon in the error/destructive color — useful for delete or warning actions.
<Icon name="trash-outline" destructive />Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | IoniconsName | required | Ionicons icon name (e.g., 'home-outline', 'settings') |
variant | 'primary' | 'secondary' | 'tertiary' | 'muted' | 'inverse' | 'accent' | 'primary' | Semantic color variant |
size | number | 24 | Icon size in pixels |
sizeVariant | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | — | Named size from theme metrics (overrides size) |
color | string | — | Custom color override (overrides variant) |
destructive | boolean | — | Render in error/destructive color |
accessibilityLabel | string | — | Screen reader label |
Color precedence: destructive > color > variant. When destructive is true, it always uses the error color regardless of other color props.
Common Icon Names
Here are frequently used Ionicons in the template:
| Icon | Name | Usage |
|---|---|---|
| Navigation | chevron-forward, chevron-back, arrow-back | List items, headers |
| Actions | add-outline, close-outline, create-outline, trash-outline | CRUD operations |
| Status | checkmark-circle, alert-circle, information-circle | Feedback |
| UI | search-outline, ellipsis-vertical, settings-outline | Controls |
| Social | heart-outline, share-outline, star-outline | Engagement |
Browse all available icons at Ionicons .
Text
The Text component is the foundation of the typography system with 8 variants, 4 weights, and 7 semantic colors. It is documented in detail under Data Display.
Quick Reference
| Variant | Typical Use |
|---|---|
h1 | Page titles |
h2 | Section headers |
h3 | Subsection headers |
body | Default paragraph text |
bodySmall | Secondary content |
caption | Timestamps, metadata |
label | Form labels, badges |
overline | Category tags, section labels |
Type Scale Example
<Text variant="h1" weight="bold">Page Title</Text>
<Text variant="h2">Section Header</Text>
<Text variant="h3">Subsection</Text>
<Text variant="body">Regular paragraph text for main content.</Text>
<Text variant="bodySmall" color="secondary">Supporting text with less emphasis.</Text>
<Text variant="caption" color="muted">Jan 15, 2026</Text>
<Text variant="label" weight="semibold">FORM LABEL</Text>
<Text variant="overline" color="tertiary">CATEGORY</Text>Semantic Colors
| Color | Token | Usage |
|---|---|---|
primary | theme.colors.text.primary | Default text, headings |
secondary | theme.colors.text.secondary | Subtitles, descriptions |
tertiary | theme.colors.text.tertiary | Hints, placeholders |
muted | theme.colors.text.muted | Disabled, decorative text |
inverse | theme.colors.text.inverse | Text on colored backgrounds |
accent | theme.colors.brand.accent | Highlighted, teal-colored text |
link | theme.colors.text.link | Tappable link text |
See the full props table and additional examples on the Data Display page.