top of page

AI Generated 3D Icons

Using Midjourney to craft 3D icons catering to all aspects of pet care and pet app platforms

Timeline

1 week experiment

My role

Icon Designer

Crafting trendy 3D icons for UI/UX design is often a tedious process, requiring specialized software, proficiency in 3D modeling, or time investment for iterations.

Context

I'm wondering...
🤔

What if we can use AI to speed up and assist the creating process? which is why I explored using Midjourney, an AI-powered tool that streamlines the creation.

The theme
🐶

I've chosen pet as the theme of my 3D icon set, addressing an in-demand niche within the UI/UX design community with the booming pet app market.

Result

The finished 3D icons were now shared to Figma Community as an open source file for community usage.
To begin, I brainstormed and listed the elements required for a pet care app, considering various aspects such as pet grooming, feeding, healthcare, and more.

This process involved understanding user needs and envisioning how the icons would fit within the app's interface.

Process (1)

Process (2)

Let's start testing & analyzing prompt with Midjourney

Now, it's time to start generating a base prompt to control the style I like. How? See below cards for the 2 steps.

Browse inspiration of style

Start with bowse and save references that closely resemble the style you envision for your icons. We'll use it later.

Utilize Midjourney's /describe Function

Simply input the images or describe the style you're aiming for, and let Midjourney generate a prompt for you.

Once Midjourney generates the prompt, review it to ensure it aligns with your vision. Copy the prompt and save it for reference during the design process. This prompt will serve as a guiding framework as you create your 3D icons.

Analyze the prompt, splitting it into different categories. Use this as a starting point, adding, deleting, and changing the information in the prompt to align it with your desired outcome.

Set of icons for a mobile applicationa chat bubble over the calendar and clock, a bell on the top right side, a flower in the center with a yellow ribbon around it, a dollar sign at the bottom left corner, a megaphone to represent a company mascot or character below that one, a gift box icon3d render in the style of vector illustration, a clay material design setagainst a black backgroundbright colors in a bright soft lighting, ui design in the flat styleisometric view

Description of the style of icons
The Objects of icons
(to be replaced)
Perspective
Background color

Process (4)

Parameter Control to adjust the level of artistic detail 
the icons to be (optional)

—Stylize

This parameter determines the level of artistic detail in the image. Since we're creating icons, we aim for a smooth and cartoony style, avoiding excessive detail or complicated curves. The ideal value range for this parameter I tested for 2D icons is --stylize 200.

--Stylize 10

set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view --stylize 10

--Stylize 700

set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view --stylize 700

Result of the revised prompt

Image to change with the change of icon objects description

The final prompt design for copy & paste

*Substitutable part is in blue colored font

set of icons for mobile application, A filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer, A digital scale, A miniature calendar with a paw print on a specific date, A notepad with a paw print on the cover , 3d render in the style of vector illustration, a clay material design set, with a rose pink, creamy yellow, and Tiffany blue color palette, on a white background, bright colors in a bright soft lighting, ui design in the flat style, isometric view --stylize 200

Original Prompt:

Revised Prompt (highlighted):

Set of icons for a mobile applicationa chat bubble over the calendar and clock, a bell on the top right side, a flower in the center with a yellow ribbon around it, a dollar sign at the bottom left corner, a megaphone to represent a company mascot or character below that one, a gift box icon, 3d render in the style of vector illustration, a clay material design setagainst a black backgroundbright colors in a bright soft lighting, ui design in the flat styleisometric view

set of icons for mobile applicationA filled ceramic bowl, A filled glass bowl, A rolled-up leash with a clip, A small roll of poop bags, A pill bottle with a red cross, A digital thermometer, A digital scale, A miniature calendar with a paw print on a specific date, A notepad with a paw print on the cover , 3d render in the style of vector illustration, a clay material design setwith a rose pink, creamy yellow, and Tiffany blue color palette, on a white backgroundbright colors in a bright soft lighting, ui design in the flat styleisometric view

(Icon objects changed)
(perspective)
(changed to white background)
(new color theme)

Process (3)

By having the a base style prompt to control the style of the 3D icons, i’m going to create a series of icons adding below new constraints

New Color Palette

Description of colors must be detailed. Instead of "blue,pink,yellow", use "Tiffiney blue, Rose pink, and cream yellow"

Tiffney blue

Rose pink

Cream yellow

Perspective

Icons should be designed in various perspectives, including isometric, front-facing, and others.

objects

Refer to Step 1, see what are the object i'll generate for creating the 3D icons

Process (5)

I Utilize Picsart, an AI-powered platform for efficient post-image editing to enhance quality and then remove background in just a few clicks.

Quality Enhancement

Upon receiving the 1024x1024 image from Midjourney, the initial resolution may be insufficient after cropping. Therefore, the first step is to enhance the image quality by enlarging it and optimizing for the best possible resolution.

Remove background

After enhancing the image quality, seamlessly remove the background with just one click using Picsart's advanced background removal tool. This step streamlines the process and ensures a clean, professional result for the final icon.

Final 3D Icons
Related projects
Motion Graphics

Motion Graphic video ads with an average of 900,000 views

Munchies Mood

To support Gen Z's well-being through food experiences.

bottom of page