CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-expo--vector-icons

Built-in support for popular icon fonts and the tooling to create your own Icon components from your font and glyph map - a wrapper around react-native-vector-icons to make it compatible with Expo.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

icon-sets.mddocs/

Icon Sets

Pre-configured React components for popular icon fonts. Each icon set provides a standardized interface with typed glyph names, Button components, and utility methods.

Capabilities

AntDesign

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

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
  ;

EvilIcons

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

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

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
  ;

FontAwesome (Version 4)

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
  ;

FontAwesome5

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} />

FontAwesome6

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

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

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
  ;

MaterialCommunityIcons

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
  ;

MaterialIcons

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
  ;

Octicons

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
  ;

SimpleLineIcons

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

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
  ;

Common Interface Methods

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 text

Common 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"

docs

icon-creation.md

icon-sets.md

index.md

tile.json