Skip to main content

Icons

npm version npm downloads GitHub source code Contributions welcome npm unpacked size language npm last update npm license

A comprehensive collection of static and animated icons for React Native applications. This package leverages react-native-reanimated to provide smooth, high-performance animations for your icons.

Installation​

You can installing FlexNative icons packages using npm:

npm i @flexnative/icons

This package requires react-native-reanimated as a peer dependency for animated components.

npm install react-native-reanimated

Key Features​

  1. Extensible Architecture: Projects can add their own icons
  2. TypeScript Support: Full type definitions
  3. Context-based Registry: Icons are managed through React Context
  4. Dynamic Registration: Register icons at runtime
  5. HOC for Custom Icons: Easy creation of named icon components
  6. Fallback Support: Handle missing icons gracefully
  7. SVG Props Support: All standard SVG props are passed through

This package provides a solid foundation for an extensible icon system that other projects can build upon and customize with their own icons.

Using Custom Fonts​

You can use a custom icon font (like IcoMoon or Fontello) by loading the font file and mapping the characters.

1. Load the Font​

Load your font file using expo-font or standard React Native linking.

import { useFonts } from 'expo-font';
// In your root component
const [fontsLoaded] = useFonts({
  'MyIcons': require('./assets/fonts/MyIcons.ttf')
});

2. Add IconProvider​

Wrap your application (or the component tree where you intend to use icons) with the IconProvider. This allows you to map icon names to your actual icon assets (font characters).

import React from 'react';
import { IconProvider } from '@flexnative/icons';
import { View } from 'react-native';

export default function App() {
  return (
    <IconProvider icons={myIcons}>
      <View style={{ flex: 1 }}>
        {/* Your app content */}
      </View>
    </IconProvider>
  );
}

Basic Icon​

Use the Icon component to display a static icon. It resolves styles (color, size) from the @flexnative/icons.

import { Icon } from '@flexnative/icons';

<Icon name="home" size="md" color="primary" />

Animated Icon​

Use the AnimatedIcon component to display icons with built-in animations. You can switch animations using the animation prop.

import { AnimatedIcon } from '@flexnative/icons';

<AnimatedIcon 
  name="heart" 
  animation="heartbeat" 
  size="xl" 
  color="error" 
  duration={1200} 
/>

Dependencies​

Dev Dependencies​

API Reference & Guides​

Dive deeper into specific parts of the theme API.