Icon

Icon renders an IconSource the way every other component renders its icons: a string name goes through the theme's iconResolver, a pre-rendered element renders as is, and a render function receives the resolved { size, color }. Use it in a custom control so the icon set and the color stay consistent with the library.

Usage

Open on Snack ↗

import { Icon, Row, Typography } from '@rootnative/components'
import { mdiResolver } from '@rootnative/components/mdi'
import { ThemeProvider, useTheme } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'

function Screen() {
  const theme = useTheme()
  return (
    <Row gap="md" align="center" style={{ padding: 24 }}>
      <Icon source="star" />
      <Icon source="heart" size={32} color={theme.colors.primary} />
      <Icon source="wifi-strength-4" accessibilityLabel="Wi-Fi connected" />
      <Typography variant="bodyMedium">Three icons</Typography>
    </Row>
  )
}

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider iconResolver={mdiResolver}>
        <Screen />
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

The default size is 24dp, the MD3 icon size, and the default color is onSurface. The box is square at size, so it lines up in a row next to text.

Icon sets

A string name resolves through the theme's iconResolver — mdiResolver from @rootnative/components/mdi for MaterialDesignIcons, or a resolver from @rootnative/icons. See Icons for Lucide, Phosphor and @react-native-vector-icons/* resolvers. An element or a render function bypasses the resolver:

<Icon source={<MySvg width={24} height={24} />} />
<Icon size={32} source={({ size, color }) => <MySvg width={size} height={size} fill={color} />} />

Accessibility

Without accessibilityLabel the icon is decorative and hidden from assistive technology, which is right next to text that carries the meaning. With a label, the icon is exposed as an image with that name, and the glyph underneath stays hidden so a screen reader never announces a private-use codepoint.

Props

Prop	Type	Default	Required	Description
source	IconSource	-	Yes	The icon. A string name is resolved through the theme's `iconResolver` (`mdiResolver` for MaterialDesignIcons); a pre-rendered element renders as is; a render function receives `{ size, color }`.
size	number	24	No	Icon size in dp. The box is square at this size.
color	string	onSurface	No	Icon color.
accessibilityLabel	string	-	No	Screen-reader label. Without one the icon is decorative and hidden from assistive technology. With one, the icon is exposed as an image with this name.
style	StyleProp<ViewStyle>	-	No	Style applied to the icon box.
hrefAttrs	{ target?: string; rel?: string; download?: string | boolean; }	-	No	Web only. The `target`, `rel` and `download` of the `<a>` that a view with an `href` renders, for example under Expo Router's `<Link asChild>`. `target: '_blank'` opens the link in a new tab. Native ignores it.
onKeyDown	(event: { nativeEvent: { key?: string; }; }) => void	-	No	-