Usage & API

Basic usage

Import the RemixIcon component and pass a name prop:

import { RemixIcon } from 'rn-remixicon';

<RemixIcon name="star-line" size={24} color="#000" />

Props

Prop	Type	Default	Description
name	IconName	(required)	Kebab-case icon name, e.g. "home-line"
size	number	24	Width and height in dp
color	string	"black"	SVG fill color — any CSS color value
...props	SvgProps	—	All other react-native-svg <Svg> props are forwarded

Icon naming

All icons follow Remix Icon's kebab-case convention with a variant suffix:

• Line variant: home-line, search-line, settings-3-line
• Fill variant: heart-fill, star-fill, apple-fill

Browse the full set at remixicon.com.

TypeScript

The IconName union type covers every available icon name. Use it for typed component props:

import type { IconName } from 'rn-remixicon';
import { RemixIcon } from 'rn-remixicon';

interface NavItemProps {
  icon: IconName; // full autocomplete in your editor
  label: string;
}

export function NavItem({ icon, label }: NavItemProps) {
  return (
    <View style={styles.item}>
      <RemixIcon name={icon} size={24} color="#333" />
      <Text>{label}</Text>
    </View>
  );
}

Subpath imports

For maximum tree-shaking, import icons directly via their subpath:

import HomeLine from 'rn-remixicon/home-line';

<HomeLine width={24} height={24} fill="#000" />

:::caution Different prop surface Subpath imports expose the raw react-native-svg component. Props are width, height, and fill — not size and color. Use the default RemixIcon import if you prefer a unified API. :::

Styling recipes

Button with icon

<TouchableOpacity style={styles.btn}>
  <RemixIcon name="arrow-right-line" size={20} color="#fff" />
  <Text style={styles.btnLabel}>Continue</Text>
</TouchableOpacity>

Tab bar icon

function TabIcon({ route, focused }: { route: Route; focused: boolean }) {
  const iconMap: Record<string, IconName> = {
    Home: 'home-line',
    Search: 'search-line',
    Profile: 'user-line',
  };
  return (
    <RemixIcon
      name={iconMap[route.name] ?? 'question-line'}
      size={24}
      color={focused ? '#0090ff' : '#999'}
    />
  );
}

List item chevron

<View style={styles.row}>
  <Text style={styles.label}>{item.title}</Text>
  <RemixIcon name="arrow-right-s-line" size={20} color="#ccc" />
</View>