UI Proposal: New App Icon on macOS

[johjakob]

With macOS 11 Big Sur, Apple brought the “squircle” app icon shape from iOS to the Mac in order to make the whole ecosystem more consistent. A majority of apps has adopted this new icon shape and my current Dock looks pretty neat in my opinion — with one exception:

Blender does a really good job at making itself at home on Mac already (e.g. the gorgeous trackpad support, progress bar in the Dock icon, notifications, fullscreen mode etc.), and I would like to propose a new app icon for Blender matching the style of macOS Big Sur to make it fit into the system even better.

Considerations

I came up with a few things that should be considered:

• The Blender logo must not be changed.
• The app icon must be easily recognisable at any size.
• Due to the Blender logo’s unique shape, a supplementary tool (like the black hammer in the Xcode icon) or any detail that interferes with the logo must be avoided.

Proposed Icon

This could work as a new icon for Blender on Mac. The dark “squircle” fits well with Blender’s default dark theme and also creates a nice contrast to the Blender logo. Subtle bevel and glow effects add detail.

The icon is optimised for small sizes to enhance recognisability:

And this is how it would look like in the Dock:

(You can grab the ICNS file here if you want to use it as a replacement icon right now.)

I would love to hear your opinions and feedback!

[brecht]

@billrey may have an opinion, he did the current version of the icon

I think conforming to the new guidelines makes sense. As for the design specifically, the lighting and shape of the squircle looks a bit different compared to other icons? It looks as if there is a bevel while other icons are flatter, and the specular highlight seems to be more subtle. Maybe something closer to the upside-down smiley icon would be more consistent? The logo might then also contrast better with the background.

[jenkm]

I think a white background will be better, perhaps with some slightly noticeable pattern (grid) like in Keynote/Numbers. Black looks very gloomy or something. The white ring inside the logo strongly stands out because of the dark background. Maybe an all-white logo would work well on a dark background. I think that the color version of the logo in principle should not be used on a dark background (blender.org/logo).

[Harleya]

[brecht]

A plain white background with the colored logo and a little bit of drop shadow may be best to follow the Blender logo guidelines.

I don’t think we should have a design here that is too different from icons on other platforms, or Blender branding in general.

[Harleya]

For sure. I am the last person to make an icon; the above is meant to be an extreme variation.

I just think that people in this thread should feel free to take some liberties and let their imaginations run a bit free. As long as we stick to Mac guidelines (which allows extending beyond these soft borders), and to Blender logo usage (which does allow a mono logo on a single color background).

If the Mac suggestions vary greatly from other platforms it is probably best to follow the platform rather than sticking to one look for all platforms. I’d rather be a good citizen of each than look funny on all of them.

That said I’d probably also prefer the regular color icon on a white background with a bit of shadow, but I still love seeing what people come up with.

[CookItOff]

Just a heads up, but there are a few community made Blender icons already out there for testing from the open source icon library macosicons.
Type “Blender” in the site’s search bar - download .icn file from site - hover over Blender Icon in Applications folder - Get Info - drag .icn on top of the icon in Blender’s info pane.

Over 5000+ free icons for macOS Big Sur & iOS - massive app icon pack

[johjakob]

Thanks for your feedback!

I’ve tried out some of your suggestions. The 3D grid variant is inspired by Grapher’s icon and this exploration by Gavin. This was actually the first thing I tried with the dark background, but I couldn’t really get it to harmonise with the logo. Maybe it would look even better with real reflections on the grid like in the Grapher icon, but this could also be too much. I still like the dark background variant even though it violates the brand guidelines, mainly because it corresponds to Blender’s interface (Sketch’s icon shows its interface in the background and Apple’s Pro apps like Final Cut Pro, Motion, and Logic Pro also have icons that represent the app’s look and feel).

Using the monochrome logo would probably create some confusion because Blender users are more familiar with the coloured logo. I would also like to be as consistent as possible across all platforms whilst matching the visual styles of each platform.

What do you think?

[CookItOff]

I like the 3D grid and also like the dark format. The dark format kind of hints at 2.8 and later with the default dark theme introduced for the UI.
Good work.

[johjakob]

Thanks! Gave the 3D grid on the dark background another quick try:

[APEC]

I’m not a mac user, but try like @Harleya here

UI Proposal: New App Icon on macOS

[macOS]

with bigger center logo and one part go across border and with your last dark 3d grid

[johjakob]

Yeah, this could work indeed. It makes the icon very prominent.
Both this one and the previous variant with the contained logo could work in my opinion — this version would definitely make Blender stand out from all the other apps around it.

[CookItOff]

Hmm, maybe your original dark with no grid is the way to go. It looks cleaner/ less busy and keeps in line with other Mac icons aesthetics.

Don’t know, both look good just putting in my two cents.

Edit: I see the version with the larger logo and that looks good with the grid.

[johjakob]

Yes, that’s a valid point.
This is what both look like in context (Dock and Launchpad). Personally, I prefer the original dark icon when I look at these.

Dark

Dark 3D grid with large logo

[APEC]

As I see the problem in “Dark 3D grid with large logo” in small row that BG gradient at the bottom merges with OS BG. Try to inverse 3d grid BG gradient, if it still be merges then yes, simple Dark BG better.

[megalomaniak]

@johjakob

The left one IMO is best as well as most consistent with blenders design/style guide. But this is just my opinion.

[d-V-b]

@johjakob for me personally the versions with white bg looks more “professional”. I would make the gradient more subtle, or even removed it completely. Plus the logo could be larger similar to @Harleya example.

[jenkm]

If you draw a shadow under the logo, it means that it is a 3D object, so it must have some thickness (2). Or it is “printed” - then without a shadow (1). You can try some embossing effect, like many default icons (3).

Double-check the colors, the correct colors are #e87d0d and #265787.

---

By the way, the link to the guidelines: https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/.

[julianeisel]

From Apple’s app icon guidelines:

Keep primary content within the icon grid bounding box; keep all content within the outer bounding box. If an icon’s primary content extends beyond the icon grid bounding box, it tends to look out of place.

So as I read this there should not be any overflow of the icon, it should stay within the inner bounding box. If you read further, it seems that the outer bounding box should only be used to add a tool symbol, like some apps do.

Plus, from the Blender logo guidelines:

The logo is used unaltered, without fancy enhancements, in original colors, original typography, and always complete (logo + text blender).

Following that we should not try to do things like 3D embossing effects.

@jenkm

The first, second or last one seem like good choices.
Might be just an optical illusion, but the last one seems to have a different orange though?

---

IMHO this is not a place to be playful or to try to “stand out”. If every app logo tried to stand out you’d have a mess. The logo should be clear, clean and identify the Blender brand professionally.

[johjakob]

I agree with @julianeisel. The logo should not be changed, as I stated in my original post already.

And yeah, I noticed that the colours are different. Interestingly, I used the logo from the official Logo Kit which uses incorrect values apparently. Thanks for the heads-up!