Pre-configured React components for popular icon fonts. Each icon set provides a standardized interface with typed glyph names, Button components, and utility methods.
Ant Design icon set with 400+ icons for business applications.
import AntDesign from '@expo/vector-icons/AntDesign';
// Component with typed glyph names
const AntDesign: Icon<AntDesignGlyphName, "anticon">;
// Common glyph names (subset of 400+ available)
type AntDesignGlyphName =
| "home" | "user" | "setting" | "search" | "heart" | "star"
| "plus" | "minus" | "check" | "close" | "left" | "right"
| "up" | "down" | "edit" | "delete" | "save" | "copy"
| "mail" | "phone" | "message" | "notification" | "calendar"
| "clock-circle" | "eye" | "eye-invisible" | "lock" | "unlock"
// ... 380+ more icons
;Usage Examples:
import AntDesign from '@expo/vector-icons/AntDesign';
// Basic icon
<AntDesign name="star" size={24} color="gold" />
// Icon button
<AntDesign.Button name="user" backgroundColor="blue">
Profile
</AntDesign.Button>Entypo icon set with social and UI icons.
import Entypo from '@expo/vector-icons/Entypo';
const Entypo: Icon<EntypoGlyphName, "Entypo">;
type EntypoGlyphName =
| "home" | "user" | "heart" | "star" | "plus" | "minus"
| "check" | "cross" | "arrow-left" | "arrow-right"
| "arrow-up" | "arrow-down" | "magnifying-glass"
// ... many more icons
;Evil Icons set with clean, simple icons.
import EvilIcons from '@expo/vector-icons/EvilIcons';
const EvilIcons: Icon<EvilIconsGlyphName, "EvilIcons">;
type EvilIconsGlyphName =
| "archive" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up"
| "bell" | "calendar" | "camera" | "chart" | "check" | "chevron-down"
| "chevron-left" | "chevron-right" | "chevron-up" | "clock" | "close"
// ... more icons
;Feather icons - beautiful, customizable open source icons.
import Feather from '@expo/vector-icons/Feather';
const Feather: Icon<FeatherGlyphName, "Feather">;
type FeatherGlyphName =
| "activity" | "airplay" | "alert-circle" | "alert-octagon" | "alert-triangle"
| "align-center" | "align-justify" | "align-left" | "align-right" | "anchor"
| "aperture" | "archive" | "arrow-down" | "arrow-left" | "arrow-right"
// ... many more clean, minimal icons
;Fontisto icon set with diverse iconography.
import Fontisto from '@expo/vector-icons/Fontisto';
const Fontisto: Icon<FontistoGlyphName, "Fontisto">;
type FontistoGlyphName =
| "home" | "search" | "heart" | "star" | "plus" | "minus"
| "check" | "close" | "left" | "right" | "up" | "down"
// ... diverse icon collection
;Classic FontAwesome 4.x icon set.
import FontAwesome from '@expo/vector-icons/FontAwesome';
const FontAwesome: Icon<FontAwesomeGlyphName, "FontAwesome">;
type FontAwesomeGlyphName =
| "home" | "user" | "heart" | "star" | "plus" | "minus"
| "check" | "times" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down"
| "envelope" | "phone" | "cog" | "trash" | "edit" | "save"
// ... classic FontAwesome 4.x icons
;FontAwesome 5.x with multiple style support (regular, light, solid, brand).
import FontAwesome5, { FA5Style } from '@expo/vector-icons/FontAwesome5';
// Multi-style icon set
const FontAwesome5: any; // Multi-style implementation
const FA5Style: {
regular: string;
light: string;
solid: string;
brand: string;
};Usage Examples:
// Using with style
<FontAwesome5 name="home" size={24} style={FA5Style.solid} />
<FontAwesome5 name="facebook" size={24} style={FA5Style.brand} />FontAwesome 6.x with extended style support including sharp variants.
import FontAwesome6, { FA6Style } from '@expo/vector-icons/FontAwesome6';
const FontAwesome6: any; // Multi-style implementation
const FA6Style: {
regular: string;
light: string;
solid: string;
brand: string;
sharp: string;
sharpLight: string;
sharpSolid: string;
duotone: string;
thin: string;
};Foundation icon set for web and mobile interfaces.
import Foundation from '@expo/vector-icons/Foundation';
const Foundation: Icon<FoundationGlyphName, "Foundation">;
type FoundationGlyphName =
| "home" | "page" | "mail" | "telephone" | "torso" | "heart"
| "star" | "plus" | "minus" | "check" | "x" | "arrow-up"
// ... Foundation framework icons
;Ionicons - premium designed icons for cross-platform applications.
import Ionicons from '@expo/vector-icons/Ionicons';
const Ionicons: Icon<IoniconsGlyphName, "Ionicons">;
type IoniconsGlyphName =
| "home" | "home-outline" | "person" | "person-outline" | "heart" | "heart-outline"
| "star" | "star-outline" | "add" | "remove" | "checkmark" | "close"
| "arrow-back" | "arrow-forward" | "arrow-up" | "arrow-down"
| "search" | "settings" | "menu" | "more-horizontal" | "more-vertical"
// ... extensive Ionic icon collection with outline variants
;Material Design Community Icons - the largest collection of Material Design icons.
import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
const MaterialCommunityIcons: Icon<MaterialCommunityIconsGlyphName, "MaterialCommunityIcons">;
type MaterialCommunityIconsGlyphName =
| "home" | "account" | "heart" | "star" | "plus" | "minus"
| "check" | "close" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down"
| "magnify" | "cog" | "delete" | "pencil" | "content-save" | "content-copy"
| "email" | "phone" | "message" | "bell" | "calendar" | "clock"
// ... 5000+ Material Design Community icons
;Google Material Design Icons - the official Material Design icon set.
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
const MaterialIcons: Icon<MaterialIconsGlyphName, "MaterialIcons">;
type MaterialIconsGlyphName =
| "home" | "person" | "favorite" | "star" | "add" | "remove"
| "check" | "close" | "arrow-back" | "arrow-forward" | "arrow-upward" | "arrow-downward"
| "search" | "settings" | "menu" | "more-vert" | "more-horiz"
| "edit" | "delete" | "save" | "content-copy" | "mail" | "phone"
// ... official Google Material Design icons
;GitHub Octicons - GitHub's icon set.
import Octicons from '@expo/vector-icons/Octicons';
const Octicons: Icon<OcticonsGlyphName, "Octicons">;
type OcticonsGlyphName =
| "home" | "person" | "heart" | "star" | "plus" | "dash"
| "check" | "x" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down"
| "search" | "gear" | "trash" | "pencil" | "repo" | "issue-opened"
| "git-branch" | "git-commit" | "git-merge" | "mark-github"
// ... GitHub-specific icons and general UI icons
;Simple Line Icons - clean, minimal line-style icons.
import SimpleLineIcons from '@expo/vector-icons/SimpleLineIcons';
const SimpleLineIcons: Icon<SimpleLineIconsGlyphName, "simple-line-icons">;
type SimpleLineIconsGlyphName =
| "home" | "user" | "heart" | "star" | "plus" | "minus"
| "check" | "close" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down"
| "magnifier" | "settings" | "trash" | "pencil" | "envelope" | "phone"
// ... minimal line-style icons
;Zocial icons - social media and brand icons.
import Zocial from '@expo/vector-icons/Zocial';
const Zocial: Icon<ZocialGlyphName, "zocial">;
type ZocialGlyphName =
| "facebook" | "twitter" | "instagram" | "linkedin" | "youtube" | "google"
| "github" | "wordpress" | "dribbble" | "behance" | "pinterest" | "tumblr"
| "flickr" | "vimeo" | "skype" | "spotify" | "soundcloud" | "rss"
// ... social media and brand icons
;All icon sets share the same interface and provide these utility methods:
// Static methods available on all icon components
IconSet.glyphMap // Access to the glyph name → code mapping
IconSet.getRawGlyphMap() // Returns the raw glyph map object
IconSet.getFontFamily() // Returns the font family name
IconSet.loadFont() // Async font loading for Expo
IconSet.getImageSource() // Generate image from icon for non-text usage
// Button component available on all icon sets
IconSet.Button // Touchable button variant with icon and textCommon Usage Patterns:
// Font loading (typically handled automatically)
await Ionicons.loadFont();
// Generate image source for use in Image components
const imageSource = await MaterialIcons.getImageSource('home', 30, 'blue');
// Access glyph map for custom logic
const glyphMap = AntDesign.getRawGlyphMap();
const isValidIcon = 'star' in glyphMap;
// Get font family name
const fontFamily = Feather.getFontFamily(); // "Feather"