Document icons not in line with Apple's HIG

[Zabriskije]

Hi folks,
I've taken a look at the document icons inside Keka and I've noticed that they are not in line with Apple's Human Interface Guidelines:

Left to right:

1. Original Apple .zip icon
2. Corrected Keka icon
3. Current Keka icon

As you can see from the example above, the Keka's icon is bigger, have a colored fold with non-rounded corners, and have a larger text than it should.

I can help you with that if you need a hand.

[aonez]

Hi @Zabriskije! Thanks a lot for taking the time to do this comparison.

At least I'm with you in the fact that the size must be corrected. Not sure about needing to change the font (size) and the fold in white since the icons do not need to replicate the Apple ones, but the shadow may be useful indeed.

[Zabriskije]

When it comes to UID, consistency is king ― imho font size and white fold should be taken to consideration.
But any way, thanks for the suppafast response and I'll leave here the original file (it's in .psd converted from Pixelmator .pxd, so if you have any trouble with it, feel free to ask me for individually-exported assets).

DocumentTemplate.zip

[Zabriskije]

I had some spare time so I've made all the document icons.
They all have their original names and colors. I slightly modified the .dmg and .iso icon, to have a centered disk image.
For readability purposes: icon_16x16, icon_16x16@2, and icon_32x32 have been changed so they don't have text in them.

A .zip would be too big to upload it here, so I've made a .7z and uploaded in my repository here.

If you like them, feel free to use them.

[aonez]

Thanks again for the effort @Zabriskije! The current icon is vectorial based and made in with Sketch. An automated script renders all the versions and optimizes them to use as less bytes as possible.

I slightly modified the .dmg and .iso icon, to have a centered disk image

👍👍👍

For readability purposes: icon_16x16, icon_16x16@2, and icon_32x32 have been changed so they don't have text in them

Not sure about this, default macOS icons have text in this versions. For example this one:

Found here: /System/Library/CoreServices/CoreTypes.bundle/Contents/Resources/ARObject.icns

[aonez]

By the way I think you'll like this file:

/System/Library/PrivateFrameworks/IconFoundation.framework/Versions/A/Resources/Assets.car

I did some research a while ago since icons for newest macOS and iOS can be made with templates. Most of the current Big Sur/Monterey default macOS icons are made with templates. That saves a lot of space in the app. That file is the foundation of the icon so you can get all raw parts from there.

[Zabriskije]

For readability purposes: icon_16x16, icon_16x16@2, and icon_32x32 have been changed so they don't have text in them

Not sure about this, default macOS icons have text in this versions. For example this one:

If you look closely, the 16x16 icon has no text; it starts from 32x32 but ― at least for me ― it's not readable until 32x32@2x.

I'm new to document icons and all info you're giving me on the subject is highly appreciated.

• What you're using to view the icon in the quote above?
• The Sketch script you mentioned just resizes the icon? I'm asking this because it seems that the actual .icns/.car made with Xcode has a slightly larger and lower icon at smaller sizes (I spotted that in list view).
  
• Is there a way to modify .car files? I've found AssetCatalogThinkerer, but it's view-only.

[grylem]

@Zabriskije

Is there a way to modify .car files?

ThemeEngine
https://github.com/alexzielenski/ThemeEngine

[aonez]

Oh sorry @Zabriskije thought I did replied.

• What you're using to view the icon in the quote above?

Icon Slate. Is paid, being using it for years. Nowadays I only use it for quick tests an preview all sizes.

• The Sketch script you mentioned just resizes the icon? I'm asking this because it seems that the actual .icns/.car made with Xcode has a slightly larger and lower icon at smaller sizes (I spotted that in list view).

It's a pretty complex script that selects colors form the Sketch template, exports them in PNG, optimizes that files and creates the ICNS.

• Is there a way to modify .car files? I've found AssetCatalogThinkerer, but it's view-only.

I just export them with the preview app you use and also recently with Pacifist. Maybe @grylem's recommendation works for you.

I had some time to play with the sizes and the fold, also tried some new patterns: Tweet

[Zabriskije]

@grylem

Is there a way to modify .car files?

ThemeEngine https://github.com/alexzielenski/ThemeEngine

Thanks, I've alredy tried it but it's not working on M1, it crashes anytime I try to open a CAR file.

---

@aonez

Thanks for all the infos.

With Optimage I was able to save a lot of space from the previous document icons files. They were ranging from 800KB to 1,2MB each, now they're ranging from 380KB to 510KB each. You can find them here.

For the document icons found on twitter, I like them; they're more in line with branding given the logo. +1 for color coding for easier identification. Still prefeer the folded corner to be white though.
At first look, the page shadow seems a bit too dark? In this ZIP you can find a better PSD document icon template than the previous one I've shared, since all the layer are rasterized (unfortunately also the text one, but you can use it as a reference).

On a personal note, I think the new logo made by David Lanham is really well-made and well-thought, but it's also too complicated and "soft" when compared to default system icons or 3rd parties one. It has a lot of character, but lacks a bit of contrast and simplicity.

[grylem]

@Zabriskije
apps from this fork https://github.com/jslegendre/ThemeEngine works on M1 with Rosetta 2.
Optimage its nice app but old ICNSmini from ohanaware works more better, your AdGuard.icns after processed has the size
131,092 bytes instead 504,998 bytes.

Can you have icon template for other sizes like 64x84, 32x32, 16x16 etc. and not only 1024x1024?

[aonez]

Just built that ThemeEngine as Universal. Note I did not notarized it: ThemeEngine.zip