[GH-ISSUE #444] Help Wanted: Bug Sur styled Icon #356

Closed
opened 2026-05-05 05:49:17 -06:00 by gitea-mirror · 11 comments
Owner

Originally created by @JoniVR on GitHub (May 15, 2021).
Original GitHub issue: https://github.com/MonitorControl/MonitorControl/issues/444

Hi everyone,

I'm giving the app a fresh lick of paint to be more in line with Big Sur changes, such as updated prefs icons (along with some other fixes along the way) and was hoping someone with some better experience in designing icons would be willing to help out in designing an icon that fits in Big Sur.

Here's my boring attempt so far:

new big sur icon

Anyone better at design willing to take a go at it?

Originally created by @JoniVR on GitHub (May 15, 2021). Original GitHub issue: https://github.com/MonitorControl/MonitorControl/issues/444 Hi everyone, I'm giving the app a fresh lick of paint to be more in line with Big Sur changes, such as updated prefs icons (along with some other fixes along the way) and was hoping someone with some better experience in designing icons would be willing to help out in designing an icon that fits in Big Sur. Here's my boring attempt so far: <img alt="new big sur icon" src="https://user-images.githubusercontent.com/7591717/118369807-216db000-b5a5-11eb-8d75-7afc403e2d79.png" width="200px"/> Anyone better at design willing to take a go at it?
gitea-mirror 2026-05-05 05:49:17 -06:00
Author
Owner

@alexandrerochasalles commented on GitHub (May 17, 2021):

Hi @JoniVR , I did the same that you are doing, and to do that I have discovered a lot of icons in this site (where also you can find option for MonitorControl, but I didn't like, so I've decided to use one for Apple TV that are available over there).

https://macosicons.com

<!-- gh-comment-id:842491931 --> @alexandrerochasalles commented on GitHub (May 17, 2021): Hi @JoniVR , I did the same that you are doing, and to do that I have discovered a lot of icons in this site (where also you can find option for MonitorControl, but I didn't like, so I've decided to use one for Apple TV that are available over there). https://macosicons.com
Author
Owner

@JoniVR commented on GitHub (Jun 12, 2021):

Hi @alexandrerochasalles yes I saw that site, though we'd probably need permission from the creators if we were going to use one.

If I ever do get some spare time I might try to make a decent one myself but there's just so much other stuff to do for this project and I'm not great at fancy icon design.

<!-- gh-comment-id:860078621 --> @JoniVR commented on GitHub (Jun 12, 2021): Hi @alexandrerochasalles yes I saw that site, though we'd probably need permission from the creators if we were going to use one. If I ever do get some spare time I might try to make a decent one myself but there's just so much other stuff to do for this project and I'm not great at fancy icon design.
Author
Owner

@waydabber commented on GitHub (Aug 1, 2021):

Here is an attempt.

The idea was the following:

  • Have some continuity with the old design.
  • Depict a subtle Apple Thunderbolt Display like design (shiny black frame with a very subtle something at the botton that might resemble a logo) with the display showing a stylized full screen brightness OSD.
  • Have some color beyond grays and blacks but no obvious images that tie the icon to a certain MacOS release (like Big Sur or Monterey) - so the brightness icon and chiclets are blue now.
  • Avoid using copyrighted product designs (as required by Apple's Human Interface Guidelines)
  • Look distinct both in bright and dark mode in Dock (for users who like to put the Applications folder there) and in Launchpad.

v1. Initial version

Icon-1024

There might be better ideas out there, so this is just a suggestion (design is rather subjective). I put this one into the experimental branch though.

It was put together in Figma, here is the file if somebody wants to modify or make it better:

MonitorControl Icon.fig.zip

<!-- gh-comment-id:890525407 --> @waydabber commented on GitHub (Aug 1, 2021): Here is an attempt. The idea was the following: - Have some continuity with the old design. - Depict a subtle Apple Thunderbolt Display like design (shiny black frame with a very subtle something at the botton that might resemble a logo) with the display showing a stylized full screen brightness OSD. - Have some color beyond grays and blacks but no obvious images that tie the icon to a certain MacOS release (like Big Sur or Monterey) - so the brightness icon and chiclets are blue now. - Avoid using copyrighted product designs (as required by [Apple's Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/macos/icons-and-images/app-icon/)) - Look distinct both in bright and dark mode in Dock (for users who like to put the Applications folder there) and in Launchpad. **v1.** Initial version ![Icon-1024](https://user-images.githubusercontent.com/37590873/127835351-0dd539d2-cae8-479c-881d-d4eb6393938c.png) There might be better ideas out there, so this is just a suggestion (design is rather subjective). I put this one into the experimental branch though. It was put together in [Figma](https://www.figma.com), here is the file if somebody wants to modify or make it better: [MonitorControl Icon.fig.zip](https://github.com/MonitorControl/MonitorControl/files/6912786/MonitorControl.Icon.fig.zip)
Author
Owner

@waydabber commented on GitHub (Aug 2, 2021):

Here are some other options:

v2. This one has a more defined border, avoids blending in and looking small when Dark Mode is enabled:

Icon-1024

v3. This one is more friendly, not as gray but does away with the subtle display allusion:

Icon-1024

v4. This one is cleaner looking (no border):

Icon-1024

v5. This one has a rather passive mountains image background (does not look that well when small though) and glassy OSD design:

Icon-1024

v6. This one has some bold colors and stand out more (maybe a bit too much)

Icon-1024

As of now I'd go with v4 or maybe v3.

<!-- gh-comment-id:890858238 --> @waydabber commented on GitHub (Aug 2, 2021): Here are some other options: **v2.** This one has a more defined border, avoids blending in and looking small when Dark Mode is enabled: ![Icon-1024](https://user-images.githubusercontent.com/37590873/127834625-9fb10ba2-3e67-42da-9dbd-168f30731248.png) **v3.** This one is more friendly, not as gray but does away with the subtle display allusion: ![Icon-1024](https://user-images.githubusercontent.com/37590873/127834658-88a35d35-6978-42eb-85f7-941329fc729e.png) **v4.** This one is cleaner looking (no border): ![Icon-1024](https://user-images.githubusercontent.com/37590873/127834668-a2e19fc8-8250-4749-a0a6-7de423aac97a.png) **v5.** This one has a rather passive mountains image background (does not look that well when small though) and glassy OSD design: ![Icon-1024](https://user-images.githubusercontent.com/37590873/127834681-9565d557-45ba-4526-8e05-6e451f21813c.png) **v6.** This one has some bold colors and stand out more (maybe a bit too much) ![Icon-1024](https://user-images.githubusercontent.com/37590873/127834686-caa44d8d-10ac-4f3a-9b84-33b6872dcc3c.png) As of now I'd go with v4 or maybe v3.
Author
Owner

@wondergit113 commented on GitHub (Aug 3, 2021):

Maybe late to the party here, but whipped this up for you. I think it carries forward some of your original design but updated with some system elements (the blue is the system color for "Link", uses an Apple Pro Display XDR, and macOS Monterey background given we are near launch of macOS 12).

Thanks for all of your work. I can't help on the engineering side but thought I'd offer something up on the design side!

MonitorControl

<!-- gh-comment-id:892091229 --> @wondergit113 commented on GitHub (Aug 3, 2021): Maybe late to the party here, but whipped this up for you. I think it carries forward some of your original design but updated with some system elements (the blue is the system color for "Link", uses an Apple Pro Display XDR, and macOS Monterey background given we are near launch of macOS 12). Thanks for all of your work. I can't help on the engineering side but thought I'd offer something up on the design side! ![MonitorControl](https://user-images.githubusercontent.com/5140425/128071657-6a91df8c-1eae-473e-b6d6-6253607205e8.png)
Author
Owner

@the0neyouseek commented on GitHub (Aug 3, 2021):

Here's my attempt 😉

icon_256x256

⬇️  Link to .icns file

<!-- gh-comment-id:892154304 --> @the0neyouseek commented on GitHub (Aug 3, 2021): Here's my attempt 😉 ![icon_256x256](https://user-images.githubusercontent.com/4009175/128083403-b6f5aee5-a183-4d81-97da-d6bd790cc5ff.png) [⬇️ &nbsp;Link to `.icns` file](https://github.com/MonitorControl/MonitorControl/files/6926940/MonitorControl.icns.zip)
Author
Owner

@waydabber commented on GitHub (Aug 3, 2021):

Hey @jamesg311 ,

I like the attempt but I think we are not allowed to use Apple proprietary hardware designs unfortunately (this seems to be explicitly forbidden this in the interface design guide). :( Obviously the current icon violates this and nothing ever happened but still... :)

Hey @the0neyouseek,

I think it looks great, resembles a monitor and is clean and direct. Also fits with other display themed Apple icons (Terminal, Activity Control, Screen Sharing). I am unsure about directly reusing the Monterey wallpaper (it will tie the icon to a specific OS release + I am not sure if it is allowed - maybe we should use something similar royalty free?). Also I'd change the arc of the OSD corners just a bit to follow the arc of the icon itself so distances feel similar everywhere between the OSD and the monitor frame. What do you think? In overall this display-like icon might be a better approach than the ones I proposed. :)

<!-- gh-comment-id:892190034 --> @waydabber commented on GitHub (Aug 3, 2021): Hey @jamesg311 , I like the attempt but I think we are not allowed to use Apple proprietary hardware designs unfortunately (this seems to be explicitly forbidden this in the interface design guide). :( Obviously the current icon violates this and nothing ever happened but still... :) Hey @the0neyouseek, I think it looks great, resembles a monitor and is clean and direct. Also fits with other display themed Apple icons (Terminal, Activity Control, Screen Sharing). I am unsure about directly reusing the Monterey wallpaper (it will tie the icon to a specific OS release + I am not sure if it is allowed - maybe we should use something similar royalty free?). Also I'd change the arc of the OSD corners just a bit to follow the arc of the icon itself so distances feel similar everywhere between the OSD and the monitor frame. What do you think? In overall this display-like icon might be a better approach than the ones I proposed. :)
Author
Owner

@waydabber commented on GitHub (Aug 4, 2021):

Hey @the0neyouseek

Here is one inspired by your work to illustrate what I mean.

Icon-1024

The background pic is taken from javierocasio which is inspired by both Big Sur and Monterey and resembles the vibe of Apple's wallpaper.

What do you think?

<!-- gh-comment-id:892511268 --> @waydabber commented on GitHub (Aug 4, 2021): Hey @the0neyouseek Here is one inspired by your work to illustrate what I mean. ![Icon-1024](https://user-images.githubusercontent.com/37590873/128169323-662d3ee6-d9d2-40b5-bc5c-12c9999fe0a1.png) The background pic is taken from [javierocasio](https://www.deviantart.com/javierocasio/art/Waves-Wallpapers-873299748) which is inspired by both Big Sur and Monterey and resembles the vibe of Apple's wallpaper. What do you think?
Author
Owner

@the0neyouseek commented on GitHub (Aug 4, 2021):

@waydabber Looks great !

<!-- gh-comment-id:892520354 --> @the0neyouseek commented on GitHub (Aug 4, 2021): @waydabber Looks great !
Author
Owner

@JoniVR commented on GitHub (Aug 4, 2021):

@waydabber I like it too! It's a bit of a mix of all the other great concepts.

<!-- gh-comment-id:892581657 --> @JoniVR commented on GitHub (Aug 4, 2021): @waydabber I like it too! It's a bit of a mix of all the other great concepts.
Author
Owner

@waydabber commented on GitHub (Aug 4, 2021):

Great! Then I think it is decided! :)

(of course there is room for further improvements in the future).

<!-- gh-comment-id:892586518 --> @waydabber commented on GitHub (Aug 4, 2021): Great! Then I think it is decided! :) (of course there is room for further improvements in the future).
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/MonitorControl#356
No description provided.