Nucleic Photon Magnetizer

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at for more info.

    TypeScript icon, indicating that this package has built-in type declarations

    0.5.0 • Public • Published


    npm npm tests on master


    This React Native component aims to be improved drop-in replacement for react-native-fontawesome. It allows to use FontAwesome 5 / FontAwesome 5 Pro icons as SVG icons.

    Difference between react-native-svg-icons and react-native-fontawesome

    Feature Description
    Built-in and up-to-date Typescript types react-native-svg-icons was rewritten using Typescript and automatically generates and packages *.d.ts files into npm package. This ensures types are always up-to-date. You don't need to download them from somewhere else.
    style property accepts array of styles This makes react-native-svg-icons compatible with styled-components and it's all modern features like css property
    Deprecated width and height properties were removed You should use unified size property
    Duotone icons are not supported Both in react-native-svg-icons and react-native-fontawesome


    $ yarn add "react-native-svg"
    $ yarn add "@fortawesome/fontawesome-svg-core"
    $ yarn add "@fortawesome/free-solid-svg-icons"
    $ yarn add "@fortawesome/react-native-fontawesome"
    $ yarn add "@breeffy/react-native-svg-icons"

    Add additional FontAwesome 5 styles or Pro version icons

    Visit to search for free and Pro icons

    $ yarn add "@fortawesome/free-brands-svg-icons"
    $ yarn add "@fortawesome/free-regular-svg-icons"

    If you are a Font Awesome Pro subscriber you can install Pro packages; this requires additional configuration.

    $ yarn add "@fortawesome/pro-solid-svg-icons"
    $ yarn add "@fortawesome/pro-regular-svg-icons"
    $ yarn add "@fortawesome/pro-light-svg-icons"

    How to use SVG Icons

    You can use SVG Icons in your React Native components like this:

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
      icon={['far', 'coffee']}

    Also you can use SvgIcon with styled-components. Below example shows how to use styled-components css prop

    import 'styled-components/macro';
        margin-top: 15px;
      icon={['far', iconName]}


    Color can be specified either through top-level color property or as color property of style objects.

    1. IF top-level color property is provided it takes precendence and will be used
    2. ELSE IF any style object's color property is provided will be used the most last one
    3. ELSE DEFAULT_COLOR = '#000' will be used

    Color Property Example

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
      icon={ faCoffee }


    Size can be specified using to-level size property. If size property is not provided will be used export const DEFAULT_SIZE = 16;

    width and height properties of style objects are not supported and will be ignored. You should use unified size property.

    Size Property Example

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
      size={ 32 }
      icon={ faCoffee }



    import { SvgIcon } from '@breeffy/react-native-svg-icons';
      mask={['far', 'circle']}
      icon={ faCoffee }

    More on masking...

    Power Transforms

    import { SvgIcon } from '@breeffy/react-native-svg-icons';
    <SvgIcon icon="arrows" transform="shrink-6 left-4" />
    <SvgIcon icon="arrow-rightr" transform={{ rotate: 42 }} />

    More on power transforms...


    More detailed guides how to use and configure FontAwesome 5 icons can be found at react-native-fontawesome

    Frequent questions

    How do I import the same icon from two different styles?

    With ES modules and import statements we can rename:

    import { library } from '@fortawesome/fontawesome-svg-core'
    import { faStroopwafel as fasFaStroopwafel } from '@fortawesome/pro-solid-svg-icons'
    import { faStroopwafel as farFaStroopwafel } from '@fortawesome/pro-regular-svg-icons'
    library.add(fasFaStroopwafel, farFaStroopwafel)

    I don't think tree-shaking is working; got any advice?

    Check out our docs here.

    How to Help

    Review the following docs before diving in:


    npm i @breeffy/react-native-svg-icons

    DownloadsWeekly Downloads






    Unpacked Size

    76.8 kB

    Total Files


    Last publish


    • victor.malov