Creating custom icons with transparency

yankeeinlondon

I would like to add icons to some of my passwords but I would want to be able to use transparency. Today with dark mode, transparency is critical to having a nice looking icon and clearly your default icons use it but when I try and add my own with PNG's that have transparency, the transparency is replaced with the white color which looks horrible in dark mode.

---

1Password Version: 1Password 7 Version 7.8 (70800001) Mac App Store
Extension Version: Not Provided
OS Version: macOS 11.2.3
Sync Type: Not Provided
Referrer: forum-search:icon

Ben

Hi @yankeeinlondon

This is something I myself have experienced and have given feedback to our design team on. At the moment it is intentional that custom icons do not have transparency. Hopefully that is something that can be re-evaluated in the future. :)

Ben

[Deleted User]

Transparency is good although I can think of one exception in dark mode : dark icons.

I've seen this with Filefactory for instance, in an app that accepts custom icons with transparency. Filefactory apple touch style icon is mainly black with a touch of red, it's unreadable with transparency if dark mode is enabled.

ag_ana

Thank you for bringing this up @J.M, that is a good point.

yankeeinlondon

@J.M I'm not sure what you mean ... dark mode drastically increases the use cases for transparency. In the old days you could proxy in WHITE for background but since browsers and apps switch between light and dark backgrounds this no longer works.

yankeeinlondon

@J.M oh i reread and you said dark icons not dark mode. The key to any good icon design is ensuring contrast. It would be great if you could provide two icons ... one for dark and one for light mode (as you can with CSS in a browser) but that is likely too fancy. For folks customizing their own environment, the transparency feature is just a really nice tool to have in the toolkit and it should be almost zero cost for 1password to implement.

yankeeinlondon

There is zero downside as you can simply use it where it fits and ignore it where it doesn't. This is 2021 ... for a company as well capitalized as 1password I'm a bit shocked that this isn't glaringly obvious.

[Deleted User]

@yankeeinlondon My example is rare of course, although I did encounter some cases of icons with colors closer to what dark mode generally uses, so they were not very pleasant to look at. A bit distracting I would say. I like dark mode anyway, if an app has such a setting I tend to use it by default these days.

ag_ana

Thank you both for the feedback, I am sure our designers will find it useful :+1:

yankeeinlondon

It is in fact because I'm an avid user of dark mode that the transparency feature is so important to me.

ag_ana

Understood :+1: