← Projects
Nerd Font Picker icon
MIT · 63 installs

Nerd Font Picker

Browse and copy Nerd Font glyphs from your installed fonts

Install Extension ↓Raycast Store ↗View source ↗

Features

  • Instant search — filter glyphs by name or codepoint (U+E000) as you type, with results capped at 200 for snappy performance
  • Live SVG previews — each glyph is rendered on the fly from the actual font outlines via opentype.js; no image assets required
  • Rich detail panel — shows a large preview alongside name, codepoint, Unicode escape, HTML entity, and the raw glyph character
  • Multiple copy actions — copy the glyph character, codepoint, name, or Unicode escape sequence, with an option to close Raycast immediately after copying
  • Configurable icon colour — choose white or black rendering to suit your Raycast theme
  • Local-only, no network — reads fonts directly from ~/Library/Fonts and caches metadata in ~/.cache/nerd-font-picker/glyphs.json; nothing leaves your machine
  • One-command cache refresh — rebuild the glyph index at any time from the action panel if you install a new font

Requirements

  • Raycast installed
  • At least one Nerd Font installed in ~/Library/Fonts whose filename ends in NerdFontMono-Regular.ttf or NerdFont-Regular.ttf

Popular choices from nerdfonts.com: JetBrains Mono Nerd Font, FiraCode Nerd Font, Hack Nerd Font. Any variant that ships the standard Nerd Font PUA block (U+E000–U+F8FF) will work.

Quick Start

  1. Open Raycast and search for "Nerd Font Glyphs"
  2. On first run the extension scans your installed font and writes a cache — this takes a few seconds and shows a progress toast
  3. Browse or search the glyph list; the detail panel updates in real time
  4. Press Return to copy the glyph and close, or open the action panel (Cmd+K) for more copy options

Usage

Searching

Type freely in the search bar to filter by glyph name or codepoint:

QueryMatches
arrowAll glyphs whose name contains "arrow"
U+E0A0Exact codepoint lookup
e0aPartial codepoint match
nf-devName-prefix filtering (Devicons family)

Detail Panel

Selecting any glyph opens a split detail view showing:

FieldExample
Namenf-dev-git
CodepointU+E0A0
Unicode Escape
HTML Entity
Glyph`` (raw character)

Action Panel (Cmd+K)

ActionDescription
Copy Glyph & CloseCopies the raw glyph character and dismisses Raycast
Copy GlyphCopies the raw glyph character and stays open
Copy CodepointCopies U+E0A0
Copy NameCopies the glyph name string
Copy Unicode EscapeCopies (or \Uxxxxxxxx for higher planes)
Refresh CacheRe-parses the font and rebuilds ~/.cache/nerd-font-picker/glyphs.json

Preferences

Open Raycast Preferences → Extensions → Nerd Font Picker to configure:

PreferenceValuesDefault
Icon ColourWhite, BlackWhite

Development

Project Structure

nerd-font-picker/
├── src/
│   ├── list.tsx      # Main command — UI, search state, action panel
│   └── utils.ts      # Font parsing, SVG rendering, cache I/O, search logic
├── assets/           # Extension icon (place command-icon.png here)
├── package.json
└── tsconfig.json

Scripts

ScriptDescription
npm run devStart extension in development mode with hot reload
npm run buildBuild for production (ray build -e dist)
npm run lintRun Raycast ESLint config
npm run fix-lintAuto-fix lint issues
npm run publishPublish to the Raycast Store

Clone & Run

git clone https://github.com/raycast/extensions.git
cd extensions/extensions/nerd-font-picker
npm install
npm run dev

Then open Raycast and search for "Nerd Font Glyphs".

Tech Stack

PackageRole
@raycast/apiRaycast extension primitives (List, ActionPanel, Clipboard…)
@raycast/utilsHigher-level Raycast utilities
opentype.jsFont parsing — reads TTF outlines and extracts PUA glyph paths
typescriptType-safe source compilation
eslint + @raycast/eslint-configLinting with Raycast's opinionated ruleset
prettierCode formatting

MIT © kud — Made with ❤️