UD5 Toolkit
Font Fallback Checker - Online See Missing Glyphs
Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.
Nerd Font Icon Previewer – Online Search & Copy Glyphs
Nerd Font Icon Previewer
Browse, search & copy Nerd Font glyphs for your terminal, editor & dev projects
Size:
38px
Filter:
No icons match your search
Try a different keyword or clear filters
Copied!
Frequently Asked Questions
What is Nerd Font?
Nerd Font is a project that patches developer-targeted fonts with a high number of glyphs (icons). Specifically, it adds popular icon fonts like Font Awesome, Devicons, Octicons, Material Design Icons, and Powerline symbols into a single font file — making it perfect for terminals, code editors, and developer tools.
How do I install a Nerd Font?
Download your preferred patched font from nerdfonts.com. On macOS, double-click the .ttf or .otf file and click "Install Font". On Windows, right-click the font file and select "Install". On Linux, copy to
~/.local/share/fonts/ and run fc-cache -fv. Then set your terminal to use the installed Nerd Font.Which terminals support Nerd Font?
Most modern terminals support Nerd Font: Windows Terminal, iTerm2, Kitty, Alacritty, WezTerm, Hyper, GNOME Terminal, Konsole, and VS Code's integrated terminal. Just make sure to select the Nerd Font as your terminal font in settings.
What are the Unicode ranges used by Nerd Font?
Nerd Font primarily uses Unicode Private Use Areas (PUA). Powerline symbols occupy
U+E0A0–U+E0D0, Devicons use U+E700–U+E7C5, Font Awesome icons are mapped around U+F000–U+F2FF, and Material Design Icons around U+F500–U+FD46. Octicons and Weather icons also occupy various PUA ranges. The exact mapping depends on the Nerd Font version.How do I use these icons in my terminal prompt?
Once you've set a Nerd Font as your terminal font, you can paste the copied glyphs directly into your shell prompt configuration (e.g.,
.bashrc, .zshrc, Starship config, or Oh My Posh theme). For example: echo -e "\uE0B0" or use the character directly. Popular prompt frameworks like Starship, Powerlevel10k, and Oh My Posh have built-in Nerd Font support.What's the difference between Nerd Font v2 and v3?
Nerd Font v3 (released 2023) introduced a redesigned naming convention and reorganized Unicode codepoints for better consistency. Many icons were moved to new codepoints. If you're upgrading from v2 to v3, you may need to update your configuration files. This tool uses v3 codepoints for maximum compatibility with current setups.
Can I use Nerd Font icons in web development?
Yes! You can self-host a Nerd Font file (like
SymbolsNerdFont.woff2) and use @font-face in CSS. Then apply the font-family to elements and use the Unicode characters directly. However, note that Nerd Font files can be large (several MB), so subsetting is recommended for web use. For web projects, consider using the original icon sets (Font Awesome, Material Icons) instead.Why don't I see the icons on this page?
This tool attempts to render icons using Nerd Font fonts. If you don't have a Nerd Font installed on your system and the CDN font fails to load, you may see blank squares or fallback characters. The Unicode information and copy functionality still work — you can copy glyphs and paste them into any application that does have Nerd Font support, such as your terminal.
PWA Manifest Generator - Online Create app.webmanifest
Fill in your PWA details to generate a valid manifest.json file. Include icons, theme color, display mode.
Lazy Loading Image Snippet Generator - Online
Generate an <img> tag with the loading='lazy' attribute and optional low‑quality placeholder. Improve Core Web Vitals. Copy the snippet.
Markdown Previewer - Online Live MD to HTML Renderer
Write Markdown and see the formatted HTML preview in real time. Syntax highlighting and GitHub-flavored Markdown support. No upload, fully local.
CSS Mask Image Generator - Online Reveal Effects
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
HTML Escape/Unescape Live Preview - Online Sandbox
Type raw HTML and see the escaped version, then see how it renders when unescaped. Understand encoding better.
Mermaid Diagram Renderer - Online Markdown to Chart
Write Mermaid syntax inside Markdown blocks and instantly see rendered flowcharts, sequence diagrams, and Gantt charts. Copy SVG.
HTML Live Previewer - Online Code to Rendered View
Write or paste HTML, CSS, and JavaScript and instantly see the rendered output in a sandboxed iframe. A handy frontend prototyping tool.
HTML Head Snippet Generator - Online Meta, CSS & JS Starter
Generate a complete <head> section with meta charset, viewport, SEO, favicon, and social tags. Customize and copy.
Web Page Screenshot Tool - Online Capture Browser Tab
Take a screenshot of the current browser tab using Screen Capture API. Crop, annotate with text and arrows, and download as PNG. Local only.
HTML Meta Inspector - Online View All Page Meta
Paste a URL and extract all meta tags, Open Graph, Twitter Cards, and JSON‑LD. View in a friendly table. Client‑side fetch.
Markdown Footnote Generator - Online Add Auto‑numbered Notes
Write text with inline footnote markers and this tool will move the notes to the bottom and add proper Markdown links. Saves time.
Drag & Drop File Upload Demo - Online With Preview
Drop files onto a zone and see a preview with name, size, and type. Copy the JavaScript pattern for your site.
content‑visibility: auto Tester - Online Render Deferral
Apply content‑visibility: auto to off‑screen sections and see the rendering cost drop. Demos for infinite scroll optimization.
CSS Paint Worklet Live Editor - Online Houdini Sandbox
Write a paint worklet in JavaScript and see it used as a CSS background instantly. Experiment with Houdini. Local.
CSS Snowfall Effect Generator - Online Winter Animation
Customize falling snow particles with pure CSS or canvas. Adjust speed, size, and wind. Copy the code for your website.
Pixelate Image Tool - Online Block & Censor Editor
Pixelate selected areas of an image to hide faces or sensitive data. Adjust block size. Download the censored result.
content‑visibility: auto Benchmark - Online Render Cost
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Web Animations API Sandbox - Online JS Animation Editor
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
GeoJSON Map Previewer - Online Render on Interactive Map
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
Frostbite Stage Identifier – Online Visual Signs & Rewarming
Swipe through visual stages of cold injury to understand frostnip vs. superficial frostbite. First aid reminders.
WebGPU Bunny Demo - Online Simple 3D Renderer
Render the classic Stanford Bunny with a basic WebGPU pipeline. Rotate and zoom. Check if your browser supports WebGPU.
Prime Factor Tree Generator - Online Visual Factorization
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Gantt Chart Dummy Generator - Online Project Timeline Visual
Enter task names, start dates, and durations to generate a simple Gantt chart as an image. Quick project view.
Live Drawing Board - Online Freehand Sketch & Save
A beautiful full‑screen drawing canvas with variable brush sizes, colors, and an eraser. Export your sketch as PNG. All data stays local.
Sewing Pattern Layout Optimizer - Online Minimize Waste
Place rectangular pattern pieces on a virtual fabric width to optimize cutting layout and reduce waste. Simple manual drag & drop. Local only.
CSS Glassmorphism Generator - Online Frosted UI Design
Visually create the glassmorphism effect: background blur, transparency, and border. Copy the complete CSS. Modern UI design.
Airbrush Paint Thinner Calculator – Online Acrylic/Enamel Ratio
Select paint type and brand to get the recommended thinning ratio for airbrush. Achieve smooth, clog-free spraying.
Image Pixelator - Online Censor & Mosaic Effect Tool
Pixelate or censor parts of an image by dragging. Adjust block size for mosaic effect. Useful for hiding faces or sensitive data. Client-side processing.
Mandelbrot Set Explorer - Online Infinite Zoom Fractal
Explore the Mandelbrot set with click-to-zoom and vibrant colors. A mesmerizing math journey inside your browser.