Extension Icon

Nerd Font Picker

Browse and copy Nerd Font glyphs from your installed fonts
Overview

Nerd Font Picker

TypeScript Raycast MIT

Browse, search, and copy Nerd Font glyphs from your locally installed fonts — entirely offline.

FeaturesRequirementsQuick StartUsageDevelopment


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+E000U+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 ❤️