tessl/npm-react-native-vector-icons
Customizable vector icons for React Native with support for multiple icon families and dynamic loading
—
icon-families.mddocs/
Icon Families
Ready-to-use icon components for popular icon sets including FontAwesome, Material Design, Ant Design, and more. Each family provides a pre-configured component with its complete glyph set.
Capabilities
Standard Icon Components
Most icon families provide a simple component interface with consistent props.
interface StandardIconProps {
/** Icon name from the family's glyph set */
name: string;
/** Icon size in points (default: 12) */
size?: number;
/** Icon color (default: 'black') */
color?: string;
/** Additional React Native Text styles */
style?: TextStyle;
/** Enable font scaling with device accessibility settings */
allowFontScaling?: boolean;
/** All other React Native Text props */
[key: string]: any;
}
type StandardIconComponent = React.FC<StandardIconProps> & {
getImageSource(name: string, size?: number, color?: string): Promise<ImageSource>;
getImageSourceSync(name: string, size?: number, color?: string): ImageSource;
};Multi-Style Icon Components
Some families (FontAwesome 5/6) support multiple font styles with additional props.
interface MultiStyleIconProps {
/** Icon name from the family's glyph set */
name: string;
/** Font style variant (varies by family) */
iconStyle?: 'regular' | 'solid' | 'brand' | 'light' | 'thin' | 'duotone';
/** Icon size in points (default: 12) */
size?: number;
/** Icon color (default: 'black') */
color?: string;
/** Additional React Native Text styles */
style?: TextStyle;
/** Enable font scaling with device accessibility settings */
allowFontScaling?: boolean;
}
type MultiStyleIconComponent = React.FC<MultiStyleIconProps> & {
getImageSource(
iconStyle: string,
name: string,
size?: number,
color?: string
): Promise<ImageSource>;
getImageSourceSync(
iconStyle: string,
name: string,
size?: number,
color?: string
): ImageSource;
};Active Icon Families
FontAwesome 6
Modern FontAwesome with multi-style support and extensive icon collection.
// Component with multi-style support
const FontAwesome6: React.FC<{
name: string;
iconStyle?: 'regular' | 'solid' | 'brand';
size?: number;
color?: string;
style?: TextStyle;
allowFontScaling?: boolean;
}> & {
getImageSource(
iconStyle: 'regular' | 'solid' | 'brand',
name: string,
size?: number,
color?: string
): Promise<ImageSource>;
getImageSourceSync(
iconStyle: 'regular' | 'solid' | 'brand',
name: string,
size?: number,
color?: string
): ImageSource;
};
// Type exports for icon names
type FontAwesome6IconName = string;
type FontAwesome6RegularIconName = string;
type FontAwesome6SolidIconName = string;
type FontAwesome6BrandIconName = string;Package: @react-native-vector-icons/fontawesome6
Icons: 2,060 free icons, 52,663 pro icons
Styles: regular, solid, brand
import FontAwesome6 from '@react-native-vector-icons/fontawesome6';
// Default style (regular)
<FontAwesome6 name="home" size={20} color="#4F8EF7" />
// Specific styles
<FontAwesome6 name="star" iconStyle="solid" size={24} color="gold" />
<FontAwesome6 name="github" iconStyle="brand" size={18} color="#333" />AntDesign
Ant Design icon set with comprehensive business and interface icons.
const AntDesign: StandardIconComponent;Package: @react-native-vector-icons/ant-design
Icons: 449 icons
Styles: single style
import AntDesign from '@react-native-vector-icons/ant-design';
<AntDesign name="heart" size={20} color="red" />
<AntDesign name="setting" size={18} color="#666" />Feather
Clean, minimalist icon set perfect for modern interfaces.
const Feather: StandardIconComponent;Package: @react-native-vector-icons/feather
Icons: 287 icons
Styles: single style
import Feather from '@react-native-vector-icons/feather';
<Feather name="camera" size={22} color="#4A90E2" />
<Feather name="bell" size={16} color="#FF6B6B" />Ionicons
Comprehensive icon set from the Ionic framework.
const Ionicons: StandardIconComponent;Package: @react-native-vector-icons/ionicons
Icons: 1,357 icons
Styles: single style
import Ionicons from '@react-native-vector-icons/ionicons';
<Ionicons name="ios-home" size={24} color="#007AFF" />
<Ionicons name="md-star" size={20} color="#FFD700" />Material Design Icons
Extensive Material Design icon collection.
const MaterialDesignIcons: StandardIconComponent;Package: @react-native-vector-icons/material-design-icons
Icons: 7,448 icons
Styles: single style
import MaterialDesignIcons from '@react-native-vector-icons/material-design-icons';
<MaterialDesignIcons name="account" size={20} color="#2196F3" />
<MaterialDesignIcons name="heart-outline" size={18} color="#E91E63" />Material Icons (Google)
Google's original Material Icons set.
const MaterialIcons: StandardIconComponent;Package: @react-native-vector-icons/material-icons
Icons: 2,234 icons
Styles: single style
import MaterialIcons from '@react-native-vector-icons/material-icons';
<MaterialIcons name="home" size={22} color="#4CAF50" />
<MaterialIcons name="star" size={16} color="#FF9800" />Octicons
GitHub's icon set for development-focused interfaces.
const Octicons: StandardIconComponent;Package: @react-native-vector-icons/octicons
Icons: 333 icons
Styles: single style
import Octicons from '@react-native-vector-icons/octicons';
<Octicons name="mark-github" size={20} color="#24292E" />
<Octicons name="repo" size={18} color="#586069" />Lucide
Modern icon set with clean, consistent design.
const Lucide: StandardIconComponent;Package: @react-native-vector-icons/lucide
Icons: 1,548 icons
Styles: single style
import Lucide from '@react-native-vector-icons/lucide';
<Lucide name="user" size={20} color="#6366F1" />
<Lucide name="search" size={16} color="#6B7280" />Foundation
Zurb Foundation's icon set for web and mobile interfaces.
const Foundation: StandardIconComponent;Package: @react-native-vector-icons/foundation
Icons: 283 icons
Styles: single style
import Foundation from '@react-native-vector-icons/foundation';
<Foundation name="home" size={22} color="#008CBA" />
<Foundation name="mail" size={18} color="#5BC0DE" />Legacy Icon Families
These icon sets are no longer actively maintained upstream but remain available:
FontAwesome 5
Previous generation FontAwesome with multi-style support.
const FontAwesome5: React.FC<{
name: string;
iconStyle?: 'regular' | 'solid' | 'brand' | 'light';
size?: number;
color?: string;
}>;Package: @react-native-vector-icons/fontawesome5
Icons: 1,611 free icons, 7,869 pro icons
FontAwesome (4.x)
Classic FontAwesome for legacy compatibility.
const FontAwesome: StandardIconComponent;Package: @react-native-vector-icons/fontawesome
Icons: 785 icons
Additional Legacy Families
- Entypo: 411 icons -
@react-native-vector-icons/entypo - EvilIcons: 70 icons -
@react-native-vector-icons/evil-icons - Fontisto: 617 icons -
@react-native-vector-icons/fontisto - SimpleLineIcons: 189 icons -
@react-native-vector-icons/simple-line-icons - Zocial: 100 social icons -
@react-native-vector-icons/zocial
Pro/Premium Families
FontAwesome 6 Pro
Extended FontAwesome 6 with additional styles and icons.
const FontAwesome6Pro: React.FC<{
name: string;
iconStyle?: 'thin' | 'light' | 'regular' | 'solid' | 'duotone' | 'sharp';
size?: number;
color?: string;
}>;Package: @react-native-vector-icons/fontawesome6-pro
Icons: 52,663 pro icons
Styles: thin, light, regular, solid, duotone, sharp
FontAwesome 5 Pro
Extended FontAwesome 5 with additional styles.
const FontAwesome5Pro: React.FC<{
name: string;
iconStyle?: 'thin' | 'light' | 'regular' | 'solid' | 'duotone';
size?: number;
color?: string;
}>;Package: @react-native-vector-icons/fontawesome5-pro
Icons: 7,869 pro icons
Custom Font Families
Fontello
Support for custom Fontello-generated fonts.
// Configured via font files in project
const FontelloIcon: StandardIconComponent;Package: @react-native-vector-icons/fontello
Custom setup required: User-provided font files
IcoMoon
Support for custom IcoMoon-generated fonts.
// Configured via font files in project
const IcoMoonIcon: StandardIconComponent;Package: @react-native-vector-icons/icomoon
Custom setup required: User-provided font files
Usage Patterns
Consistent Styling
// Create reusable icon components with consistent styling
const AppIcon = ({ name, ...props }) => (
<FontAwesome6 name={name} size={20} color="#4A90E2" {...props} />
);
<AppIcon name="home" />
<AppIcon name="star" iconStyle="solid" color="gold" />Dynamic Icons
// Use different families based on context
const getIconComponent = (family: string) => {
switch (family) {
case 'fa6': return FontAwesome6;
case 'ant': return AntDesign;
default: return Feather;
}
};
const DynamicIcon = ({ family, ...props }) => {
const IconComponent = getIconComponent(family);
return <IconComponent {...props} />;
};Install with Tessl CLI
npx tessl i tessl/npm-react-native-vector-icons