top of page

AI Generated 3D Icons

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

(6 mins read)

Overview

Problem

Crafting trendy 3D icons for UI/UX design is often a tedious process, requiring specialized software, proficiency in 3D modeling, or significant time investment for iteration and refinement. I wonder 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.

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.

Challenge statement

Can I leverage AI tool (Midjourney) to generate

a collection of unique and trendy 3D icons,

suitable for pet-themed design needs?

Result

I By providing specific prompts and descriptions for the theme of pet, I used Midjourney generated a variety of icon designs that were further refined and customized.

 

The finished 3D icons were now shared to Figma Community as an open source file for community usage.

Access file

My Approach

Step 1

  • Brianstorm

Step 2

  • Generating & Analyze prompt

Step 3

  • Define & revise

Step 4

  • Control Parameters

Step 5

  • Post-Processing

Scroll to view

Step 1: Brainstorm

Brianstorm

To begin, I brainstormed a list of essential icons 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.

Step 2: Generating & analyzing prompt

Generating the Prompt with Midjourney

Browse inspiration for the style of icon i like

I begin by exploring various styles of 3D icons on Pinterest to gather inspiration. Save images that closely resemble the style you envision for your icons.

Utilize Midjourney's /describe Function

Open Midjourney and utilize its "/describe" function. This feature helps generate descriptive prompts based on the images you've collected. Simply input the images or describe the style you're aiming for, and let Midjourney generate a prompt for you.

Copy and Save the Prompt

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.

Description of the style of icons
The Objects of icons
(will be replaced)

Set of icons for a mobile application, a 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 background, bright colors in a bright soft lighting, ui design in the flat style, isometric view

Perspective
Background color

Step 3: Define & revise

IBy having the prompt as a base style to design my own 3D icons, i’m going to create a series of icons adding below new constraints:

New Color Palette

Tiffney blue

Rose pink

Cream yellow

Description of colors must be detailed. Instead of "blue,pink,yellow", use "Tiffiney blue, Rose pink, and 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

Original Prompt:

Set of icons for a mobile application, a 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 background, bright colors in a bright soft lighting, ui design in the flat style, isometric view

Revised Prompt (highlighted):

(Icon objects changed)

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

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

Step 4: Parameter Control (optional)

—Stylize

--Stylize 10

--Stylize 700

VS.

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 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, 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 700

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.

Final prompt for you to 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

Result of the revised prompt

Image to change with the change of icon objects description

Step 5: post-processing

Post-Processing with Picsart

I Utilize Picsart, an AI-powered platform for efficient post-image editing to enhance quality and then remove backgroun 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
Munchies Mood

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

CareIn

A device bridging the communication between young people and elderly.

bottom of page