# Alternative macOS icon?

**URL:** <https://discourse.joplinapp.org/t/alternative-macos-icon/8996>\
**Category:** Development\
**Created:** [28 May 2020 09:13 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996 "2020-05-28T09:13:38Z")\
**Posts on this page:** 1\
**Showing post:** 17

<div class="post-metadata">

**Author:** ![elsiehupp](https://yyz2.discourse-cdn.com/flex028/user_avatar/discourse.joplinapp.org/elsiehupp/32/5260_2.png) [@elsiehupp](https://discourse.joplinapp.org/u/elsiehupp)\
**Post date:** [12 January 2021 13:27 UTC](https://discourse.joplinapp.org/t/alternative-macos-icon/8996/17 "2021-01-12T13:27:56Z")

</div>

I finally got around to taking a look at the Big Sur outline shape, only to realize that someone else had beaten me to it. Here's what the Joplin icon currently looks like on Mac:

 ![RoundedCornersMac_1024x1024](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bf571fcfa0838743cdcad14653eda413d317c037.png)

I actually started from scratch because I hadn't noticed the new icon. The first tweak I made was replacing the rounded rectangle outline with a "squircle", that is, the peculiar mathematical shape used by iOS 7 and later, as well as macOS Big Sur:

> **[iOS 7 Icon Squircle](https://www.cocoanetics.com/2013/06/ios-7-icon-squircle/)**
>
> Apple is not only revamping the look of iOS 7 apps to be kind of flat, also most app icons will have to get a redesign. Over the recent years we could see a trend that some app designers felt that …

I based my outline on [the template](https://github.com/elrumo/macOS_Big_Sur_icons_replacements/tree/master/design) provided by [macosicons.com](http://macosicons.com). Because I was working with the existing SVG file, I just took the gradient and glyph and scaled them to fit the new clipping mask. The template included a raster drop shadow, though I subsequently replaced it with the programmatic one used by the existing icon.

At this point I discovered the updated icon from three weeks ago, and one thing I noticed (in addition to the use of the rounded rectangle outline instead of a squircle) was the use of a bevel. My understanding with [the macOS icon guidelines](https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/) is that pseudo-3D detailing should generally only be used when a design represents a physical object. Also the beveling in the new icon was rasterized, so I was not able to recreate in SVG. The template I used had a much more subtle (rasterized) bevel, which I dispensed with, and the old Joplin icon for macOS also had a much more subtle bevel, so bevels are not necessarily completely verboten.

Another tweak I made, also based on the fact that the icon does not represent a physical object, was to replace the "J" glyph's drop shadow with an inner shadow, based on the example set by the macOS Apple Music icon:

 ![com.apple.Music](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/e/ef7bf9277aa8f467b6273886c6d8594703182c49.png)

This is the result I ended up with:

 ![https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png](https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png)

As you can see, the differences are very subtle. (FWIW because the exact placement of the glyph as well as the exact colors of the gradient I got from the existing SVG file, any differences there are incidental. The color space might also be mucked up, idk.)

Here are the icons side by side for easier comparison:

 ![RoundedCornersMac_1024x1024](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/b/bf571fcfa0838743cdcad14653eda413d317c037.png) ![com.apple.Music](https://canada1.discourse-cdn.com/flex028/uploads/cozic/original/2X/e/ef7bf9277aa8f467b6273886c6d8594703182c49.png) ![https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png](https://github.com/laurent22/joplin/raw/18436cdc5bb84adb108d04f47c00142241431a9d/Assets/macOs.iconset/icon_512x512%402x.png)

I have an [open merge request](https://github.com/laurent22/joplin/pull/4346) with the updated icon, though I am open to feedback, especially about the glyph's inner shadow (and any incidental changes I may have messed up). I uploaded raw vector versions in both [SVG](https://github.com/elsiehupp/joplin/blob/mac-icons/Assets/macOsIcon_3.svg) and [PSD](https://github.com/elsiehupp/joplin/blob/mac-icons/Assets/macOsIcon_3.psd). The SVG version does not have the inner shadow because inner shadows are rasterized in SVG, which makes it un-editable, while the PSD version does. Feel free to make further modifications and upload them here or in [the `mac-icons` branch](https://github.com/elsiehupp/joplin/tree/mac-icons) if you're comfortable using GitHub!

---

_[View the full topic](https://discourse.joplinapp.org/t/alternative-macos-icon/8996)._