Expo Icons Search 🎨

A rich VS Code extension for @expo/vector-icons that brings autocomplete, hover previews, gutter icons, and a searchable command palette to your React Native / Expo projects.

Features

1. Autocomplete with Inline Preview

Triggered when typing inside a name="..." prop on any supported icon component. Each suggestion shows:

The icon rendered as an embedded SVG in the documentation panel
Unicode codepoint in U+XXXX format

// Start typing inside name="..." to get completions:
<MaterialIcons name="ho|" />  // → shows "home", "hotel", "hourglass-full", …

2. Hover Preview

Hover over any icon name to see:

48 × 48 SVG rendering of the actual glyph
Icon name, set name, and Unicode codepoint
Table of all other sets that share this icon name
Ready-to-copy JSX snippet

3. Gutter Icon & Inline Decorations

Every line containing an icon component gets:

A gutter icon — the real glyph rendered at your configured size
An inline pill — the glyph rendered at 14 px directly after name="..."

Both automatically adapt to your VS Code colour theme.

4. Command Palette Search (`Ctrl+Shift+I` / `Cmd+Shift+I`)

Fuzzy-search across all 14 icon sets from the command palette. On selection:

Inserts a full JSX snippet at cursor with tab stops for size and color
Automatically adds import { … } from '@expo/vector-icons' (or extends an existing import)

// Inserted snippet:
<MaterialIcons name="home" size={24} color="#000000" />
//                              ↑ tab stop 1     ↑ tab stop 2

5. Workspace Configuration

All settings live under expo-icons.* in your VS Code settings and work per-workspace.

Supported Icon Sets

Set	Import
AntDesign	`@expo/vector-icons/AntDesign`
Entypo	`@expo/vector-icons/Entypo`
EvilIcons	`@expo/vector-icons/EvilIcons`
Feather	`@expo/vector-icons/Feather`
FontAwesome	`@expo/vector-icons/FontAwesome`
FontAwesome5	`@expo/vector-icons/FontAwesome5`
Fontisto	`@expo/vector-icons/Fontisto`
Foundation	`@expo/vector-icons/Foundation`
Ionicons	`@expo/vector-icons/Ionicons`
MaterialCommunityIcons	`@expo/vector-icons/MaterialCommunityIcons`
MaterialIcons	`@expo/vector-icons/MaterialIcons`
Octicons	`@expo/vector-icons/Octicons`
SimpleLineIcons	`@expo/vector-icons/SimpleLineIcons`
Zocial	`@expo/vector-icons/Zocial`

Configuration

Setting	Type	Default	Description
`expo-icons.enabledSets`	`string[]`	all 14	Which icon sets to load
`expo-icons.previewSize`	`number`	`16`	Gutter icon size in px (12–24)
`expo-icons.showInlineDecoration`	`boolean`	`true`	Toggle inline pill after `name="..."`
`expo-icons.showGutterIcon`	`boolean`	`true`	Toggle gutter icon
`expo-icons.theme`	`"auto"` \| `"light"` \| `"dark"`	`"auto"`	Icon colour override

// .vscode/settings.json
{
  "expo-icons.enabledSets": ["MaterialIcons", "Ionicons", "Feather"],
  "expo-icons.previewSize": 20,
  "expo-icons.theme": "auto"
}

Requirements

VS Code ^1.85.0
Node.js 18+ (for building from source only)

Installation

From the Marketplace (recommended): Search for "Expo Vector Icons" in the VS Code Extensions panel, or install via:

ext install thedev204.expo-icons-search

From source:

git clone https://github.com/thedev204/expo-icons-search.git
cd expo-icons-search
npm install   # also generates icons-data.json
npm run build

Then press F5 in VS Code to launch the Extension Development Host.

Troubleshooting

Problem	Fix
`icons-data.json not found`	Run `npm run build:icons`
Gutter icons show `?`	Run `npm run build` to copy font files to `out/assets/fonts/`
Completions not appearing	Ensure file type is `js/ts/jsx/tsx` and cursor is inside `name="..."`
Hover shows code snippet only	Restart VS Code after first install

Changelog

See CHANGELOG.md for the full release history.

Contributing

Contributions are welcome! Please read CONTRIBUTING.md before submitting a pull request.

Report bugs via the Issue Tracker
Review our Code of Conduct
Review our Security Policy

License

MIT — see LICENSE for details.

Expo Icons Search

DhruvGehlot