Don’t blow me up

TLDR:

• Most icons are meant to be small – try not to blow them up

• Instead, give icons more weight by putting them in a circle

• Pick between giving the circle a background or a border – see which one you like best

Before:

After:

This issue is sponsored by Design Hacks, a newsletter run by incredible designer Erik D. Kennedy! Design Hacks helps you create better designs. It features short, original UI/UX tips & tactics. It’s read by over 50,000 people from Apple, Google, Stripe, and more. Check it out here!

I was creating an onboarding flow for my new app, which includes a step where the user picks the kind of element (I call them “tiles”) they want.

The design for this felt pretty straightforward – I had a square for each of the tiles and, inside, I had:

• an icon representing the kind of tile it was

• the name of the tile type

Pretty simple, right?

Here’s the wireframe:

What do you think?

To me, it looks ok, but something about it feels off. There’s something about the tiles that’s just not working for me, but I’m not sure what.

Fortunately for us, there aren’t too many elements involved, so dissecting this problem shouldn’t take too long.

Here are the elements we can play with:

• Border of the tiles (color, thickness, and radius)

• Sizing (title + icon)

• Icons

The easiest thing to play with is the border, so let’s start there.

Border

Here are the original elements of my border:

• Color: gray (#D9D9D9)

• Width: 1px

• Border radius: 8px

There are tons of variations of these three variables and it’s tough to know which direction I want to go in, but let’s see if we can define our goals and decide what variables will help us get there.

I want the whole onboarding flow to feel approachable and the emphasis to be on the content within each rectangle. With those goals in mind, I’m going to:

• Use a lighter gray for the border color

• Make the border radius rounder, to make it feel more friendly (maybe 16px?)

• Thicken the border

Note: I’m making the border thicker because I’m making it lighter. Making a border a lighter gray generally makes it harder to see and thickening it gives it more weight, and, therefore, more presence.

Let’s see if that improves the look and feel of this section and gets rid of that “off” feeling I’m getting.

I think it does look a bit friendlier, but that “off” feeling is still there for me.

Also, in lightening the border, I created a new dilemma. Can you spot it?

The border color is very close to the modal’s border color. That makes it a bit harder for my individual tiles to stand out the way I want them to. I want more visual separation between the modal and the tiles, so I’m going to go back to my original color and border width.

I do think the more rounded corners make it look more approachable, so I’m going to keep those.

Here’s the updated design:

With borders out of the way, one variable down, two more to go!

Next, let’s look at the sizing.

Sizing

One thing I struggled with on this design is figuring out how to size the title and its icon.

I’ve read that icons should generally be a bit bigger than the text, but are mine too big? Should they be closer to the same size? Should my title be bigger?

Let’s play and find out!

I don’t think my icons should be bigger than what they are now, so let’s try going the opposite way – let’s bring the two sizes closer together by bumping up the size of my text.

Oof, I do not like that at all. Look at that “product page” element – the icon and text take up so much space! It’s too tight and feels crowded.

However, I do like the size relationship between the icon and the text – they feel a bit more cohesive. So let’s bring the text back down to its original value and make the icons a bit smaller and see how that feels.

I like this so much better. I feel like each text and icon combo has the breathing room it needs to sit comfortably in its little box. Padding feels right, sizing feels better, but I still haven’t gotten rid of that “off” feeling.

We’ve got one more thing left to try: playing with the icons.

Let’s do it!

Icons

To be honest, I do not want to mess with my icons. I don’t know about you, but I find images and icons to be a little overwhelming. First I have to pick the library, of which there are so many to choose from, and then I have to decide what looks good? Oof, too much pressure!

When it’s time for me to pick an icon, I start with two free libraries I like:

• Feather

• Heroicons

Feather is a collection of simple, beautiful, open source icons with a solid range of options. Heroicons look very similar, are also free, and are from the makers of Tailwind.

They both have Figma plugins, and between the two of them, I can usually find what I need. To keep styles consistent throughout your app, it’s ideal to use a single library for all your icon needs, but sometimes the library won’t have what you're looking for.

In that case, I use a paid option called the Noun Project. They have both icons and photos and their library is huge! There are tons of options to pick from so you can find the style that best fits your app. I pay $39/year for it and I think it’s an absolute steal.

I think the actual icons themselves do their job well and I really don’t want to go through the process of replacing them. So what else can I do?

At this point I felt stuck and so I reached out to Erik Kennedy, a design educator whose course I was taking. He immediately said, “Your icons are too big. I have a tweet about that.”

He sent me the following tweet.

I had a feeling he was right. It wasn’t that I’d picked bad icons, it’s that I was misusing them.

Icons are generally meant to be small. They’re designed that way. I was blowing them up past their intended size.

At the same time, I needed them to be bigger. Having a small icon next to 18px text just doesn’t make sense. Here, let’s try it and see for ourselves.

Oof, that’s just not right.

Luckily for us, it looks like we’ve got an easy fix! All we have to do is place our small, correctly sized icon into something bigger to give it more presence. We can put it in a circle with either a border or a background color.

Let’s try both and see which we like better! I’m going to start with a circle with a simple border.

I like it a lot! I could make the borders a bit darker since they feel a bit too light right now, but it definitely gets rid of the “off” feeling I was getting.

Now let’s try it with no border and just a background color.

I don’t know about you, but this is my favorite so far. It looks so clean and intentional. I think the light gray background makes the icons pop. Even at a smaller size, they hold their own and take up space, which is great!

This feels like a huge improvement in the design of this onboarding stage. I might consider adding some color in a later draft, but we’ll do a whole thing on colors in a different issue. I’m happy with how this looks for now.

Key takeaways:

• Icons are generally meant to be small – don’t blow them up!

• Give icons more weight by putting them in a circle

• Pick between a circle with a background or a circle with a border – see which one you like best

If you end up using this icon styling tip in your next project, I’d love to know about it!

Happy designing! 🤗
Saron

PS. I’d love to learn more about what made you subscribe. Help me out and take this poll?