Icons

FlexNative suite delivers more than 49 integrated font icons for its components.

The FlexNative Icons is part of the FlexNative and is available under the @flexnative/icons NPM package.

What Are Icon Fonts

Icon fonts are fonts which contain vector glyphs instead of letters and numbers. You can style them with CSS by using all styling properties that can be applied to a regular text in a modern browser.

Dependencies

• @flexnative/theme-context
• expo-font

Installation

You can installing FlexNative Icons packages using npm:

npm i @flexnative/icons

API

import Icon from '@flexnative/icons';

Component

Icon

Type: React.MemoExoticComponent<(props: IconProps) => React.JSX.Element>

Icons List

FlexNative Icons set contains 49 icons but you can create and use your own icon set. See section Custom Icons how to create and use your set of icons.

This article provides a complete list of the icons available in the icons font.

sort-number-desc

sort-number-asc

sort-alphabet-desc

sort-alphabet-asc

unsort

puzzle

multi-device

lightning

gridicons

light-dark

color-palete

check

badge

menu

bookmark

label

grid

text-block

popup

modal

filet-json

file-excel

avatar

users

chevron-left

caret-down

caret-up

sun

moon

star

image

check-list

checkbox

number-input

button

text-box

web

android

apple

close-circle

material-design

spinner-1

spinner-2

spinner-3

sort-alt

spinner

file-pdf

paint-brush

trash

📄️ Basic Usage

To use a icon font, you have to make sure you import them into your project. Only after the font is loaded, you can use Icon set.

📄️ Custom Icons

@flexnative/icons package uses custom icon fonts created based on a IcoMoon.

📄️ Usecase Examples

The following example demonstrates the Icons in action.