# Styling Icons with React Native

Tips and techniques for styling Font Awesome icons in React Native applications.

> React Native doesn't have CSS, so styling Font Awesome icons uses native props and `StyleSheet`. Here's how to size, color, and transform icons in your mobile app.

## Sizing Icons

The default icon size is `16`. To adjust the size, use the `size` prop (a number in React Native units):

```tsx
<FontAwesomeIcon icon={faMugSaucer} size={32} />
```

## Coloring Icons

The `color` prop takes priority over color set via `StyleSheet`. If both are provided, the prop wins — and any `color` property on the style object is stripped before it's passed to the underlying SVG, to avoid ambiguity.

Prefer the `color` prop over a `StyleSheet` entry when you can.

### Color Prop

```tsx
<FontAwesomeIcon icon={faMugSaucer} color="red" />
```

### Color via StyleSheet

```tsx
import { View, StyleSheet } from 'react-native'
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome'
import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer'

const styles = StyleSheet.create({
  icon: {
    color: 'blue'
  }
})

export default function App() {
  return (
    <View>
      <FontAwesomeIcon icon={faMugSaucer} style={styles.icon} />
    </View>
  )
}
```

## Duotone Icons

You can specify the color and opacity for the secondary layer of Duotone and Sharp Duotone icons using the `secondaryColor` and `secondaryOpacity` props. Both are optional — by default, the secondary layer uses the primary color at 40% opacity.

```tsx

<FontAwesomeIcon
  icon="mug-saucer"
  color="blue"
  secondaryColor="red"
  secondaryOpacity={0.4}
/>

```

## Power Transforms

Take control over the positioning of your icons with [power transforms](/web/style/power-transform.md):

```tsx

<FontAwesomeIcon icon="arrows-up-down-left-right" transform="shrink-6 left-4" />
<FontAwesomeIcon icon="arrow-right" transform={{ rotate: 42 }} />

```

## Masking

Want to combine two icons into one single-color shape? Enter [masking](/web/style/mask.md):

```tsx
<FontAwesomeIcon icon="mug-saucer" mask="circle" transform="shrink-6" />
```

Note we're also using Power Transforms to shrink the `mug-saucer` so it fits nicely inside the mask.

You can also use `maskId` to explicitly set the id used for masking. It's auto-generated by default, but providing a stable value is important for [Jest Snapshot Testing](https://jestjs.io/docs/snapshot-testing):

```tsx
<FontAwesomeIcon icon="mug-saucer" mask="circle" maskId="mug-saucer-mask" transform="shrink-6" />
```

## What's Different from Web

React Native renders native views, not HTML, so a few styling features available in the web `react-fontawesome` component **don't apply** here:

- **T-shirt sizes** (`xs`, `sm`, `lg`, `2xl`, `5x`, etc.) — use the numeric `size` prop.
- **CSS animations** — `spin`, `beat`, `bounce`, `fade`, `flip`, `shake`, `pulse`, `spinPulse`, `spinReverse`, `beatFade`, `rotateBy`. Use React Native's [Animated](https://reactnative.dev/docs/animated) API or [Reanimated](https://docs.swmansion.com/react-native-reanimated/) to animate icons instead.
- **Borders** (`border` prop) — wrap the icon in a `<View>` with `borderWidth`/`borderColor` via `StyleSheet`.
- **Pull** (`pull="left"`/`"right"`) — use flexbox layout in React Native.
- **List icons** (`listItem`) — compose your own list layout with `<View>` and `<Text>`.
- **Automatic widths** (`widthAuto`) — not applicable; icons use the `size` prop.
- **`className`** — React Native has no class names. Use the `style` prop with `StyleSheet`.
- **SVG `symbol`** — no `<use>` equivalent in React Native SVG.
- **`fa-layers`** — compose layered icons with absolutely positioned `<View>`s.
- **CSS custom properties** (e.g. `--fa-rotate-angle`, duotone color variables) — not available in React Native. Use the equivalent props (`transform`, `secondaryColor`, `secondaryOpacity`).
- **`inverse`** — set `color="#fff"` (or whatever inverse color you want).
- **`swapOpacity`** — set `secondaryOpacity` and color values explicitly.

Everything else — explicit icon imports, library-based lookups, power transforms, masking, and duotone customization — works the same as on the web.