One-Click Copy: Click any icon to copy its HTML code snippet (<i class="codicon codicon-icon-name"></i>)
Local Development Support: Configure path to local codicons repository for development
TTF Font Optimization: Optimized for TTF font loading and rendering
Real-Time Updates: Refresh capability to see latest codicon changes
🚀 Usage
Quick Start
Open Command Palette (Ctrl+Shift+P / Cmd+Shift+P)
Run "Show Codicons Inspector"
Browse, search, and click to copy codicons!
Keyboard Shortcut
Windows/Linux: Ctrl+Alt+I
macOS: Cmd+Alt+I
Search Examples
home → finds home icon
chat sparkle → finds chat-sparkle icon
file text → finds file-text icon
search → finds all search-related icons
⚙️ Configuration
Local Codicons Development
Perfect for codicons developers and contributors:
Open Settings: File > Preferences > Settings
Search: "Codicon Inspector"
Set Path: Point "Local Codicons Path" to your codicons repository
Example: /Users/yourname/codicons/dist
This enables:
Testing unreleased codicons
Development workflow integration
Real-time icon updates during development
🛠️ Development
Prerequisites
Node.js 16+
VS Code 1.80+
Git
Setup
# Clone and setup
git clone https://github.com/mrleemurray/codicon-inspector.git
cd codicon-inspector
npm install
# Compile
npm run compile
Development Workflow
# Watch mode (recommended during development)
npm run watch
# Test the extension
# Press F5 in VS Code to launch Extension Development Host
# Package for distribution
npm run package
Project Structure
├── src/
│ ├── extension.ts # Main extension logic
│ └── test/ # Test files
├── package.json # Extension manifest
├── tsconfig.json # TypeScript configuration
└── README.md # This file
🔧 Technical Details
Font Loading Strategy
Primary: Local codicons repository (TTF fonts)
Fallback: Bundled @vscode/codicons package
Smart Conversion: Automatic CSS processing for TTF optimization
Architecture
WebView Panel: Custom HTML/CSS/JS interface
Dynamic Extraction: Real-time CSS parsing for icon discovery
Theme Integration: Full VS Code theme compatibility
Performance Optimized: Efficient rendering for 500+ icons
Icon Extraction Process
Locate codicons CSS file (local or bundled)
Parse CSS for .codicon-*:before rules
Extract icon names and Unicode characters
Generate multi-size display grid
Enable search and copy functionality
📋 Commands
Command
Description
Keybinding
codicon-inspector.showCodicons
Show Codicons Inspector
Ctrl+Alt+I / Cmd+Alt+I
codicon-inspector.refreshCodicons
Refresh Codicons
-
🎯 Use Cases
Web Development: Find perfect icons for web interfaces
VS Code Extension Development: Browse available icons for extensions
Design System Work: Analyze icon consistency and coverage
Codicons Development: Test and preview new icons
Documentation: Reference icon names and usage
🤝 Contributing
Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
