Building a 3D Icon Generation Tool

Building a 3D Icon Generator

Building a 3D Icon Generator

Context

I experimented with ChatGPT to generate consistent images using the same prompt each time. By creating the JSON prompt below, I was able to convert simple black-outlined icons into 3D icons, and the results turned out surprisingly good.

Input

JSON style prompt with a reference outline icon image.
Model - GPT 5

{

"subject": "3D icon based on the attached black outlined icon",

"goal": "Render a single, large 3D icon viewed from the front. It should be centered in the frame and occupy the majority of the canvas, with no additional views or angles. The background must be perfectly white (#FFFFFF), with absolutely no shadows, gradients, or lighting bleed.",

"style": "Modern, minimal, soft rounded edges, subtle bevels, realistic depth without background interference",

"materials": [ "Polished clay"],

"colors": {

"base": "#465ADB",

"accent": "#61FFFA",

"background": "#FFFFFF"

},

"lighting": {

"type": "3-point lighting",

"key_light": "Soft warm light from top-right",

"fill_light": "Neutral fill from left",

"rim_light": "Cool light from back-left",

"shadows": "Disabled",

"background_shadow": "Disabled",

"global_illumination": "Soft, even, with no visible falloff on white background"

},

"composition": {

"layout": "Single centered icon",

"framing": "Centered with ample white padding",

"background": "Pure white with no shadows or color variation"

},

"camera_angles": {

"view": "Front"

},

"output": {

"resolution": "1024x1024",

"format": "PNG",

"layout": "Single icon render"

}

}

{

"subject": "3D icon based on the attached black outlined icon",

"goal": "Render a single, large 3D icon viewed from the front. It should be centered in the frame and occupy the majority of the canvas, with no additional views or angles. The background must be perfectly white (#FFFFFF), with absolutely no shadows, gradients, or lighting bleed.",

"style": "Modern, minimal, soft rounded edges, subtle bevels, realistic depth without background interference",

"materials": [ "Polished clay"],

"colors": {

"base": "#465ADB",

"accent": "#61FFFA",

"background": "#FFFFFF"

},

"lighting": {

"type": "3-point lighting",

"key_light": "Soft warm light from top-right",

"fill_light": "Neutral fill from left",

"rim_light": "Cool light from back-left",

"shadows": "Disabled",

"background_shadow": "Disabled",

"global_illumination": "Soft, even, with no visible falloff on white background"

},

"composition": {

"layout": "Single centered icon",

"framing": "Centered with ample white padding",

"background": "Pure white with no shadows or color variation"

},

"camera_angles": {

"view": "Front"

},

"output": {

"resolution": "1024x1024",

"format": "PNG",

"layout": "Single icon render"

}

}

{

"subject": "3D icon based on the attached black outlined icon",

"goal": "Render a single, large 3D icon viewed from the front. It should be centered in the frame and occupy the majority of the canvas, with no additional views or angles. The background must be perfectly white (#FFFFFF), with absolutely no shadows, gradients, or lighting bleed.",

"style": "Modern, minimal, soft rounded edges, subtle bevels, realistic depth without background interference",

"materials": [ "Polished clay"],

"colors": {

"base": "#465ADB",

"accent": "#61FFFA",

"background": "#FFFFFF"

},

"lighting": {

"type": "3-point lighting",

"key_light": "Soft warm light from top-right",

"fill_light": "Neutral fill from left",

"rim_light": "Cool light from back-left",

"shadows": "Disabled",

"background_shadow": "Disabled",

"global_illumination": "Soft, even, with no visible falloff on white background"

},

"composition": {

"layout": "Single centered icon",

"framing": "Centered with ample white padding",

"background": "Pure white with no shadows or color variation"

},

"camera_angles": {

"view": "Front"

},

"output": {

"resolution": "1024x1024",

"format": "PNG",

"layout": "Single icon render"

}

}

Output

Use-Case

Used the AI generated 3d icons for a section in the enlyft website

Building an App to Generate 3D Icons

I set out to make the process of generating 3D icons more efficient by building an app that allows anyone to easily input their preferences and receive icons in their desired style and brand colors. For the MVP, I’ve included a few core customization options: Icon Style, Material, Colors, Shadows, and Camera Angle.

I experimented with several AI app builders such as Lovable, Replit, and V0, but found that the best results came from a tool called Base44.

MVP

Note: The icons are of lower quality compared to the ones shared earlier, since Base44 relies on its in-built GenerateImage model for image generation, which is not on par with OpenAI’s GPT Image 1 model. Additionally, third-party APIs are only available with a paid plan.

How it Works?

Next Steps

I’m currently designing and building the authentication flows, as well as features like History, Collections, and additional customization options for the icons. I also plan to integrate OpenAI’s GPT Image 1 API to generate higher-quality icons, while considering the associated costs.

Get in Touch

For opportunities or just to have a conversation!

naren.abbaraju9@gmail.com

Copy Email

Copied

Crafted by Naren Abbaraju, 2025.

531 others are watching this portfolio. Hurry up!

#darkpatterns

Get in Touch

For opportunities or just to have a conversation!

naren.abbaraju9@gmail.com

Copy

Crafted by Naren Abbaraju, 2025.

531 others are watching this portfolio. Hurry up!

#darkpatterns

Get in Touch

For opportunities or just to have a conversation!

naren.abbaraju9@gmail.com

Copy Email

Copied

Crafted by Naren Abbaraju, 2025.

531 others are watching this portfolio. Hurry up!

#darkpatterns