Icons

One icon component that draws an SF Symbol on iOS and a Material Symbol on Android, colored by role

One.UI.Icon shows the right icon on each platform and colors it with the platform’s own system colors. You give it an SF Symbol for iOS, a Material Symbol for Android, and any element for web; it renders the one for the current platform.

Color it by role, such as secondary or danger, and the icon follows the system palette, light and dark mode included, with no React re-render.

Usage

import { One } from 'one'

const share = {
  ios: <One.iOS.Image systemName="square.and.arrow.up" accessibilityLabel="Share" />,
  android: <One.Android.Icon name="share" accessibilityLabel="Share" />,
}

function ShareIcon() {
  return <One.UI.Icon icons={share} colorRole="accent" />
}

Keep the icons object at module scope and reuse it. A label makes the icon readable by VoiceOver and TalkBack; without one it is decoration.

How it works

The component picks the element for the platform and clones it with color and size added. It renders nothing of its own.

• iOS requires a One.iOS.Image element, which draws the symbol with SwiftUI’s Image(systemName:). The role becomes the image’s foreground style, a UIKit dynamic color, so it changes with the color scheme inside SwiftUI. The size comes from swiftStyle.fontSize, 24 points by default; the same width and height are given to both React Native layout and SwiftUI, so the icon measures the same in both.
• Android requires a One.Android.Icon element, a Compose Icon drawing a Material Symbol. The role resolves against the current MaterialTheme color scheme, which follows dark mode and, on Android 12 and later, the wallpaper’s dynamic colors. The size comes from size, 24 dp by default.
• Web returns icons.web unchanged, or nothing when it is missing.

Passing color instead of colorRole sets the foreground color directly.

API reference

Each role maps to these colors:

Platform differences

Limits and gotchas

• Both native elements are required. The type requires ios and android, and each platform throws if its element is not the expected component.
• Size iOS icons with swiftStyle. swiftStyle.fontSize sets the symbol size and the frame; swiftStyle.width and height, or numeric style.width and height, override one side.
• Web is up to you. No role or size is applied on web; style the element you pass.
• Roles and color exclude each other. The type allows one or the other. With color, no role is sent.

Examples

import { Pressable, Text } from 'react-native'
import { One } from 'one'

const trash = {
  ios: <One.iOS.Image systemName="trash" swiftStyle={{ fontSize: 18 }} />,
  android: <One.Android.Icon name="delete" size={18} />,
}

function DeleteRow({ onDelete }: { onDelete: () => void }) {
  return (
    <Pressable onPress={onDelete} accessibilityRole="button" accessibilityLabel="Delete" style={{ flexDirection: 'row', gap: 8 }}>
      <One.UI.Icon icons={trash} colorRole="danger" />
      <Text>Delete</Text>
    </Pressable>
  )
}

The label is on the button, so the icon stays unlabeled and VoiceOver reads “Delete” once.

import { One } from 'one'

const heart = {
  ios: <One.iOS.Image systemName="heart.fill" accessibilityLabel="Liked" />,
  android: <One.Android.Icon name="favorite" accessibilityLabel="Liked" />,
}

function Liked() {
  return <One.UI.Icon icons={heart} color="#E5484D" />
}

A fixed color skips the system palette, so the heart is the same red in light and dark mode.