How to design app icons

Renowned UX (User Experience) designer Josh Brewer once said that an app icon is ". . . like a little song, and being able to identify it easily amid noise is crucial."

It's a sentiment resonating throughout the design world at large. The next decade of design will be all about finding exciting ways to design online user experiences that cut through the mess with visual anchors. 

Historically, designers have approached app icon creation with a focus on clarity and symbolism, encapsulating the app's purpose in a singular visual metaphor, often resulting in complicated icons. But as technology and user expectations evolve, so does the art of app icon design.

From the earliest app icon designs for Xerox Star in 1989 to the wildly beautiful, near-holographic icons being released almost daily, we're steadily moving towards designs that break the rules of app design.

Icons could mean more than those standard magnifying glass shapes of the past or a static piece of branding from the last two decades of web design. 

"The best app icons are the ones that feel alive, almost as if they're a natural extension of the app itself."—Khoi Vinh, Design Director at the New York Times

Linearity Curve is tailored to streamline the app design process. It offers templates, libraries, and design tools that enable seasoned and aspiring designers to bring their app icon designs to life.

Let's start with some of the technical aspects of app icon design to get you set up. 

UI guidelines for app icon design

When designing your app icon, User Interface (UI) guidelines ensure your icons aren't just (extremely) good-looking but also functional and helpful to the user. Each platform has its own set of rules and expectations that app icon designers need to understand to make informed decisions.

From Apple's sleek and minimalistic approach to Google's Material Design principles for Android App icons—desktop to mobile—each set of guidelines offers unique insights and directives that shape how we create and interact with apps.

Here's a quick reference table for reliable sources of app icon guidelines across various platforms:

We caught up with Alexander Deplov, Senior Product Designer at Linearity, to get some insight into how he approached the design of Linearity's new UI icons.

"Good UI icons should possess a few characteristics that make a big difference between good and bad."—Alexander Deplov, Senior Product Designer at Linearity

Here are Alexander's app icon design tips:

Meaning

UI icons' meaning should be readable at a glance. Cultural differences may affect the interpretation of icons. To avoid that, designers need to reduce the amount of details, and consider cultural differences and users' past experiences. If possible, provide a meaningful label for an icon.

Style

Find your own style for an icon that aligns with your brand. What makes your UI icons represent your brand and be attached to it?

It might be stroke width, curvature, gaps, spacing, corner radius—all the logic that you include to make the icon stand out from competitors.

Consistency

Maintain a consistent style across all icons within your interface. Consistency helps users recognize patterns and understand the meaning of icons more easily. This includes the visual weight of an icon, the level of detail, stroke thickness, spacing, corner radius, and so on.

From that perspective, if you download different UI icons from different free sources they won't work well together. The best results can be achieved by manually crafting them to maintain consistency for each.

Alignment with text

UI Icons are often used closely with text. They should work well together and be visually balanced to have synergy. Choose a baseline or alignment point that works well with your overall design and stick to it.

Strike a balance between the visual weight of icons and text. Neither should overpower the other. They should work together harmoniously to convey information.

Now that you know a bit about what to create, let's start our step-by-step guide to a winning app icon design.

7 steps to design your app icon with Linearity Curve

Find app icon inspiration

Get inspired by how other designers and tech groups approach effective app icon design. A great place to start is with our Linearity designers’ biggest design trends.

One of the team's predictions that we can look forward to seeing more this year is the return of skeuomorphism. This design approach mimics real-world objects or materials. After many years of flat design, we're excited about the return of dimension in digital design.

In this tutorial, we’ll explore skeuomorphic design to create our app icon. It’ll involve careful attention to detail, like textures, shadows, and gradients, to create a realistic user experience. We’ll also share a time-saving design hack to make a whole suite of app icons in a jiffy. 

Create a new document

Begin by launching Linearity Curve. Click New Document to set up your Artboard. We'll use the Mac App Icon size template for this tutorial, but other sizes are available in the 'New Document' section.

When choosing the size for your app icon, remember that vector-based designs are helpful because they retain their quality at any scale. This means you can work with larger sizes at a later stage without losing clarity or design details, so don't be afraid of working small at first.

If you prefer working with predefined sizes, consider these standard dimensions: 

After setting your size, create a new layer. Navigate to the Layers Tab on the left side of your workspace to do this, and you're ready to begin.

Add an icon color to the background Fill of your Artboard. To do this, select the background layer and toggle the Background Fill button in the Style Tab. Select the gradient option using green and black to kick off the growth aesthetic.

Add your base icon’s shape

Now that your app icon Artboard has been set up, let's add some form to the background. To do this we’re going to be creating a holding shape and color so that your app icon design is pushed into the foreground.

To build your shape, select the Shape Tool in the Toolbar. From the shapes menu in the Toolbar menu that appears, choose the Oval Tool. You can also press the 'O' key on your keyboard for quick access to activate the Oval Shape Tool directly.

Select your shape once you're happy with the size, and add a Fill color. You can also apply the gradient Fill to this shape to make the circle look more like a sphere. Exploring color psychology will help you choose appropriate colors in app icon design. 

Add an icon image

Now, you can create your icon image. One option is to try our Iconator feature—a gallery inside Curve with over 80,000 royalty-free icons that you can use for free in all your projects.

To use one of the Iconator vectors, open the Library Tab, search using keywords, and then tap and drag an icon to insert it into your document.

Another option is to design your own icon from scratch. Explore how to do this in our Kawaii icon design tutorial. You can create whatever shape you dream of using the Shape Tool and Path Nodes. 

Add a shadow behind your icon to make it pop out of the background a bit more. You can access and change the Shadow Section using the Color Panel inside the Inspector on the right side of your screen.

Set the Shadow Color using the Color Widget Tool, the numeric Hex Field, or the Color Picker Tool. Additionally, you can set the numeric alpha value.

Export and share your icon 

The final step in the design process is exporting your icon artwork. Consult your project's specific guidelines or requirements, especially when designing custom icons for different digital platforms.

To export the file, click on the Export icon in the File menu and choose the appropriate file format.

We recommend saving your icon in the .svg file format, which is widely supported by web browsers and vector design tools.

Give yourself a round of app-lause

Crafted with just a click, your app icon is ready to lure users into a new digital experience.

But you've only just begun to explore the possibilities of Linearity Curve's creative tools. 

Craft sleek logos, playful emojis, and informative infographics powered by our ever-expanding libraries and other useful tools like the Background Removal feature.

Linearity Curve makes your team’s designs the star. Take your ideas from concept to high-quality asset in a fraction of the time. 

Frequently asked questions