Start using Icon-Studio ➢ Icon-Studio
View Update
1 Film Grain Effect: We added a textured, vintage noise overlay to the "Image Effects" list. It gives the icons a really premium, gritty camera texture.
2 Frosted Glass Effect: We added a glassmorphism effect (blurs the image slightly and adds a frosty tint) to the "Image Effects" list.
3 "Low Frosty" Tweak: I just adjusted the Frosted Glass to be much subtler (less blur, lower opacity) so the image is still clearly visible underneath the frost.
1 100% WYSIWYG (What You See Is What You Get): We completely rebuilt the preview system. The live preview now uses the exact same Canvas API math as the download engine. The border thickness (Thin/Medium/Thick) you see on screen is exactly what you get in the downloaded PNG.
2 Flawless, Notch-Free Borders: We fixed the ugly jagged corners on the Square, iOS, and Rounded shapes. By using the arcTo method and the evenodd ring-punching logic, the borders are now perfectly clean and smooth.
3 HiDPI Crispness: We implemented High-Definition rendering so the canvas looks sharp on Retina screens.
-
Image Upload and Preview Users can upload their own image via drag-and-drop or file browsing (supports PNG, JPG, ICO, SVG, WebP). The page provides a large, live preview of the image alongside smaller previews showing how the icon will look at standard smaller sizes (128px, 64px, 40px, 28px).
-
Extensive Customization Options The page acts as a mini image editing tool, offering various ways to style the icon:
-
Border Shapes: Users can change the shape of the icon (Circle, Rounded, Square, iOS style, Hexagon, Diamond, Octagon). Icon Rings: Users can add a glowing, colored border around the icon. There are 14 color gradients to choose from (Ice, Frost, Aurora, Gold, Crystal, Nebula, Rose, etc.) and 3 width options (Thin, Medium, Thick). Backgrounds: Users can choose different background colors or gradients to sit behind their image (e.g., Deep Ocean, Void, Indigo Night, or Transparent). Image Effects & Filters: Users can apply visual overlays (Dark Gradient, Vignette, Inner Shadow) and color filters (Frost, Vintage, Cyberpunk, Magma, Mono, etc.) to give the image a specific aesthetic. Adjustments: Sliders allow users to fine-tune the image by rotating, scaling, and shifting its position (X/Y axis and Up/Down) to ensure it sits perfectly inside the chosen shape.
-
Preset Management Save/Load: Users can save their exact combination of customizations as a .json preset file to their computer. They can later load this file back into the tool to instantly apply the same settings to a new image.
-
High-Resolution Exporting Once the user is happy with their design, they can click download buttons to export the final image as a PNG image. The tool uses an off-screen HTML5 Canvas to render the final high-quality image, offering exports in 4 specific resolutions: 128x128, 256x256, 512x512, and 1024x1024 pixels. Summary In short, Icon-Studio is a client-side design tool meant for creating aesthetically pleasing, perfectly cropped, and stylized profile pictures or app icons without the need for complex software like Photoshop. All processing is done directly in the user's browser using HTML, CSS, and JavaScript.
A free easy way for those who have virtually no knowledge of graphic design. they are the perfect tools for creating themes icons sets for OpenCore or Clover ➦ Combined with this tools ➥ Image Resizer ➥ Workshop Layered Image-Studio
- HTML Page Create with help of Z-AI