Icon Studio

A powerful web-based tool for customizing Material Symbols and Font Awesome icons. Design, preview, and export custom icon styles with an intuitive interface inspired by modern design tools.

Features

• Multi-Library Support

  • Material Symbols (Outlined, Rounded, Sharp)
  • Font Awesome (Free & Pro support)
  • Easy switching between icon families

• Advanced Customization

  • Two-tone coloring with adjustable offset
  • Material Symbols variable font properties (weight, fill, grade, size)
  • Font Awesome opacity and style controls
  • Custom effects (shadow, glow, gradient)

• Professional Tools

  • Real-time preview
  • Background toggle for contrast checking
  • Zoom controls
  • Advanced color picker
  • CSS code generation

• Export Options

  • Copy CSS

  • Export complete themes with variables

  • Save configurations

  • One-click code copying

  • Animation Support

  • Multiple animation presets (spin, bounce, pulse, etc.)

  • Live preview of animations

  • Export animation CSS with themes

  • Configurable animation settings

Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/icon-studio.git

Open index.html in your web browser

No build process required - Icon Studio runs entirely in the browser!

Dependencies

Material Symbols (Google Fonts) Font Awesome 6.5.1 Pickr Color Picker

All dependencies are loaded via CDN for easy setup. Usage

Select Icon Library

Choose between Material Symbols or Font Awesome Select specific style variant (Outlined, Rounded, etc.)

Choose an Icon

Browse the icon grid Use search to filter icons Click to select

Customize

Adjust colors using the color pickers Modify icon properties (weight, fill, grade, size) Add effects (shadow, glow, gradient) Fine-tune positioning and opacity

Export

Copy generated CSS Export complete theme Save configurations for later use

Browser Support

Tested and supported in:

Chrome (latest) Firefox (latest) Safari (latest) Edge (latest)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. License MIT License - feel free to use in personal and commercial projects.

Acknowledgments

Inspired by modern design tools like Figma and Adobe XD Built with vanilla JavaScript for maximum compatibility Special thanks to the Material Symbols and Font Awesome teams

Future Plans

Save/Load custom configurations Export to different framework formats (React, Vue, etc.) Batch processing multiple icons Custom icon upload support More effect options Animation presets

Support

For issues and feature requests, please use the GitHub issues system.

Built with ❤️ by Me

Special thanks to Claude from Anthropic for assistance in development