Icons

Shared icon selection with responsive native colors

One.UI.Icon picks the icon element your app provides for the current platform and colors it with a native system color.

• iOS draws an SF Symbol through One.iOS.Image.
• Android draws a Material Symbol through One.Android.Icon.
• Color roles follow light and dark mode without a React subscription.
• Your app owns the glyphs, sizes, and accessibility labels.

Usage

Pass one element per platform. An icon without an accessibility label is treated as decoration.

import { One } from 'one'

const shareIcons = {
  ios: (
    <One.iOS.Image
      systemName="square.and.arrow.up"
      accessibilityLabel="Share"
      swiftStyle={{ fontSize: 20 }}
    />
  ),
  android: <One.Android.Icon name="share" size={20} accessibilityLabel="Share" />,
  web: <ShareIcon color="$color" size={20} />,
}

<One.UI.Icon icons={shareIcons} colorRole="accent" />
<One.UI.Icon icons={shareIcons} color="#E5484D" />

API reference

IconColorRole is "primary" | "secondary" | "tertiary" | "accent" | "danger".

Behavior

• The role reaches SwiftUI or Compose unchanged and resolves from the active color scheme, so a light or dark mode change recolors mounted icons.
• On iOS the icon is sized from swiftStyle.fontSize, or width and height when set, and 24 otherwise. On Android it is sized from size, 24 by default.
• One does not map roles on web. Style the web element yourself.