Icon Generator for VS Code

Create beautiful, custom icons with text, colors, and fonts directly in Visual Studio Code. Perfect for generating app icons, favicons, or any custom graphic assets for your projects.

Screenshots

✨ Features

🎨 Customization Options

• Custom Text: Add any text up to 20 characters
• 8 Font Choices: Arial, Verdana, Tahoma, Times New Roman, Helvetica, Roboto, Courier New, Georgia
• Color Picker: Choose any color for text and background
• Corner Radius: Adjust rounded corners (0-50px)
• Font Size Slider: Scale text from 10% to 150%

📐 Multiple Icon Sizes

Generate icons in 4 standard sizes:

• 16x16 - Perfect for favicons
• 48x48 - Chrome extension icons
• 64x64 - Standard app icons
• 128x128 - High-resolution icons

🖼️ Live Preview

See your icon design in real-time as you make changes. What you see is what you get!

🌓 Dark Mode Support

Beautiful dark theme that automatically matches VS Code's appearance.

💾 Easy Export

Click any generated icon to save it directly to your workspace with a save dialog.

🚀 Getting Started

Usage

1. Open Icon Generator:

   • Press Ctrl+Shift+P (or Cmd+Shift+P on Mac)
   • Type "Icon Generator: Open Panel"
   • Or use shortcut: Ctrl+Shift+I (or Cmd+Shift+I)

2. Design Your Icon:

   • Enter text (e.g., "App", "MC", "🎨")
   • Choose a font from the dropdown
   • Pick colors using the color pickers
   • Adjust corner radius and font size
   • Watch the live preview update

3. Generate Icons:

   • Click "Generate Icons" button
   • All 4 sizes will be created instantly

4. Save Icons:

   • Click on any generated icon
   • Choose save location in the dialog
   • Icon is saved as PNG to your workspace

🎯 Use Cases

Web Development

• Favicons: Generate 16x16 favicons for websites
• PWA Icons: Create multiple sizes for Progressive Web Apps
• Social Media: Design custom sharing thumbnails

Extension Development

• VS Code Extensions: Create extension icons
• Browser Extensions: Generate Chrome/Firefox extension icons
• Marketplace Assets: Design icons for extension marketplaces

App Development

• Mobile Apps: Create app launcher icons
• Desktop Apps: Generate application icons
• Notification Icons: Design status bar icons

Branding

• Logos: Quick logo mockups
• Prototypes: Design concept icons
• Brand Assets: Create consistent brand icons

📋 Examples

Create a Simple Letter Icon

Text: "A"
Font: Arial
Font Color: #FFFFFF (White)
Background: #2463EB (Blue)
Corner Radius: 8
Font Size: 50%

Create a Colorful Emoji Icon

Text: "🚀"
Font: Arial
Background: #1F2937 (Dark Gray)
Corner Radius: 12
Font Size: 80%

Create a Professional Monogram

Text: "MC"
Font: Helvetica
Font Color: #F59E0B (Amber)
Background: [#111827](https://github.com/mchinnappan100/vscode-extn-icongen/issues/111827) (Black)
Corner Radius: 4
Font Size: 60%

⌨️ Keyboard Shortcuts

🎨 Screenshots

Main Interface

The main icon generation interface with all controls

Live Preview

Real-time preview updates as you design

Generated Icons

All four icon sizes ready to save

Dark Mode

Beautiful dark theme support

🔧 Technical Details

Built With

• TypeScript: Type-safe extension code
• VS Code Extension API: Native integration
• HTML5 Canvas: Icon rendering
• Tailwind CSS: Beautiful UI styling

File Format

• Output: PNG (Portable Network Graphics)
• Color Space: RGB
• Transparency: Supported

Performance

• Instant Preview: Real-time updates
• Fast Generation: All sizes in < 100ms
• Low Memory: Efficient canvas operations

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

What This Means

• ✅ Commercial use allowed
• ✅ Distribution allowed
• ✅ Private use allowed
• ❌ No liability
• ❌ No warranty

🎓 Tips & Tricks

Pro Tips

1. Use Emojis: Emojis work great as icons! Try 🚀, 🎨, 💡, 🔥
2. Short Text: 1-2 characters usually look best
3. High Contrast: Use contrasting colors for better readability
4. Test Sizes: Always preview at actual size before using
5. Save Designs: Take screenshots of settings you like

Best Practices

• Keep text short and readable
• Use high contrast for small sizes (16x16)
• Test on different backgrounds
• Consider accessibility (color blindness)
• Use consistent corner radius across icons

Common Mistakes to Avoid

• ❌ Too much text (hard to read)
• ❌ Low contrast colors (invisible at small sizes)
• ❌ Extreme font sizes (distorted text)
• ❌ Inconsistent styling across icon set

🆚 Comparison

vs Other Tools

🎉 Success Stories

"This extension saved me hours of work creating icons for my extensions!" - Developer

"Perfect for quick prototyping and mockups." - Designer

"Love the live preview and easy export!" - Student

📱 Related Extensions

Check out these complementary extensions:

• Image Preview: View images in VS Code
• Color Picker: Advanced color selection
• SVG Viewer: Preview SVG files

Made with ❤️ by Mohan Chinnappan for the VS Code community

Happy Icon Creating! 🎨✨