Editing Default Style

Made with by Designfreaks.net

Other Tools Credits

Icon Name

Press Enter

Custom Icon Symbol

Icons with a transparent background are recommended (.svg and png). Processing is done locally. Nothing is sent to the server. Uploading large images will greatly increase ZIP size and export time, and uploading too many may cause lag.

Icon Class

Press Enter

Browse icons on FontAwesome or Phosphor.
Note: Mixing icon fonts with custom classes is not recommended. Different icon sets use different prefix styles, which can make matching icons unreliable.
FontAwesome brand icons require fa-brands (e.g. fa-brands fa-pinterest).

Symbol Size

Fill Color

Enter

Icon Color

Enter

Color

Enter

Intensity

Position (X / Y)

Softness / Blur

Edge Margin

This lets you keep a reusable copy of your work so you can come back to it anytime, even on another device. You can import it later and continue editing exactly where you left off. The Icon Designer auto-saves, but exporting gives you a permanent project file you fully control.

First things first: What is this tool?
Want to make your own custom icon pack for your phone without spending hours in Photoshop, editing hundreds of icons manually? With Icon Designer, you can quickly create and tweak hundreds of icons at the same time.

Global vs. individual Edit everything at once using the default settings or by clicking Edit Style, or click any icon on the canvas to give it a unique style.

Custom style sets Modify a single icon and use Create Style to save it as a new group. Perfect for creating variant packs!

Style transfer Happy with the results after editing an individual icon? You can transfer the style to all icons in the same group by using Apply Globally.

Style priority Once you manually change an icon (color, scale, etc.), it ignores global changes. Use Use Group Style in the Reset section to re-sync it.

Customization Go to Appearance to swap solid colors for gradients or even a base image (like a texture or pattern).

Custom symbols Can't find the right icon? Click an icon, scroll to Custom, and upload your own image, or type a custom class.

You own your data Use Export Project to save your project as a .json file. This lets you keep a reusable copy of your work so you can come back to it anytime, even on another device. You can import it later and continue editing exactly where you left off. The Icon Designer auto-saves, but exporting gives you a permanent project file you fully control.

It's broken! It's recommended to clear your saved data from time to time by manually creating a New Project, instead of working with the same data all the time.

Select Use Group Style to make this icon match the rest of the pack, or use the reset button to wipe all manual changes.

Desktop recommended

Heads up! You can use the Icon Designer on mobile, but it's definitely not made for it. Managing a library of 400+ icons is just a massive job for such a tiny screen. You'll have a much better time on a desktop! <3 P.S.: On some mobile devices, shadows with higher blur values may look blocky in exported icons. This has been observed on iOS and is a limitation in the rendering method. Desktop browsers render the same blur smoothly.