or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

icon-creation.mdicon-sets.mdindex.md
tile.json

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"