Styling Icons with React Native

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):

<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

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

Color via StyleSheet

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.

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

Power Transforms

Take control over the positioning of your icons with power transforms:

<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:

<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:

<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 API or 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.