@fluentui/react-native-icons

Fluent System Icons are a collection of familiar, friendly, and modern icons from Microsoft.

User story

@fluentui/react-native-icons are SVG based icons wrapped in a React Native element. Because each icon is its own element, you only need to import what you need for your application.

There are two different states of each icon, Filled and Regular, so you can choose what works best for your application. These are by default sized to 1em, and can be scaled up or down to suit your developer needs.

Unlike the react-icons package, styling support isn't yet available due to limited styling capabilities of RNSVG.

User flows

In order to use these icons, simply import them as import { [Componentname][state] } from @fluentui/react-native-icons as follows:

import { AccessTimeFilled } from "@fluentui/react-native-icons";

The previous icon offerings are scalable, but if you know what size you want to use for your icons, and you are not planning on using multiple sizes, it is recommended to use the sized icons. These are the same icons as the general case, but in multiple different sizes, built to look pixel perfect at those specific sizes. You can import the sized icons in a similar way:

import { AccessTime24Filled } from "@fluentui/react-native-icons";

import {
  AccessTime20Filled,
} from '@fluentui/react-native-icons';

const FluentIconsTest: React.FunctionComponent = () => {
  return (
    <React.Fragment>
      <View style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
        <View style={{ flexDirection: 'row' }}>
          <AccessTime20Filled />
        </View>
      </View>
    </React.Fragment>
  );
};