[v3 Update] Native Apple Touch Bar Icon Pack for BTT

touch-bar
icons
#1


About this pack:

I've found most of Apple's native touchbar icons in "/System/Library/CoreServices/SystemAppearance.bundle/Contents/Resources/Assets.car" and exported all I could find with https://github.com/alexzielenski/ThemeEngine/releases.

I've also named and sorted them for your ease of use.
Vote this thread up if you support this work!



Preview Icons

Show Images



Download



Previous Versions

Version 2


Support

If you'd like to support me and my work, you can do so here at paypal.Me/yuuiko
Finishing my last years of High School, I would really appreciate any support you have for me!


0 Likes

Can BTT provide access to the native Touch Bar icons?
Minimalist: A clean and intuitive touchbar preset
Can system touchbar icons be accessed?
simple, efficient timer widget
GoldenChaos-BTT Support and Feedback Thread
#3

Thanks yyuuiko! This was what I was looking for - a place to download all the Apple system icons. Very helpful!! :slight_smile:

1 Like

#4

I thought it'd be helpful!

I hope it's complete, and useful for you.

0 Likes

#5

You might wish to update this in your download, True Tone icon!

0 Likes

#6

Sure!
It seems like it is not a touchbar icon though, I'll edit it to fit the size.

0 Likes

#7

All Done!

  • Edited tmxgkh's true tone icon to the right size
  • Moved 'Send' icon from 'Actions' folder to 'Communication' folder
0 Likes

#8

Actually shouldn't the aspect ratio of the icon files be 1:1 or square in order to use it as icon on BTT?

0 Likes

#9

No, they do not.

These icons are direct from apple, I’m sure they know what they’re doing!

I also use rectangular icons for my ‘Aqua-Touch’ preset. The most extreme example would be:

I plan to implement indicators that show that a control is holdable, but I am still experimenting with the design. (again, rectangular icon)

Check out my Preset:

0 Likes

#10

Hmm ok but when I drag and drop the icon to BTT, it gets compressed like this:


(look at Force Quit)

0 Likes

#11

how to find AirPods and AirPods case icon? there are not airpods and AirPods case icon?

0 Likes

#12

Just turn this checkbox on:

If you decide not to use that checkbox, Make sure the width and height settings of the button icon is half of the image size.

Say the image you are using is 52x60 px, Set the icon width and height in BTT to
W: 26px H: 30px. (half of 52x60px)

0 Likes

#13

At the moment, I have not found the Airpods and Airpods case icon, though I haven't tried to find them.

You can try dig in and find it yourself within:
/System/Library/CoreServices/SystemAppearance.bundle/Contents/Resources/Assets.car.

I'll try find them myself but don't expect me to find them soon, or find them at all.

0 Likes

#14

I can't seem to find them within /System/Library/CoreServices/SystemAppearance.bundle/Contents/Resources/Assets.car .

You may need to get these icons externally, or dig deeper into macOS to find some. I don't have an experience with AirPods, does macOS even display their icon somewhere? If not, then it's probably not in the system.

0 Likes

#15

In here!
13%20%EC%98%A4%ED%9B%84

I don't know how to access Assets.car​:joy::sweat_smile:

0 Likes

#16

I've accessed all of the files there and i can't seem to find them

They're probably stored somewhere else that I don't currently know yet.

Do note that that bundle only includes touchbar icons, meaning if it isn't displayed in the touchbar by apple it probably won't be in the bundle.

0 Likes

#17

Thank you so much !!!!!!!!!!!!!!!!!!!!!

0 Likes

#18

I went on an icon hunt and found almost 300 more icons!

Apple Icon Set v2 is here, See the top post for a preview on what's new.

Enjoy!

0 Likes

#19

This is great - way better than grabbing them individually from the .car file every time. Thank you for doing this!

The True Tone icon, by the way, is custom-made. I took the inner circle from the iPhone's True Tone icon and the outer "rays" from Apple's Night Shift Touch Bar icon to get what I assume is an icon identical to the native Touch Bar True Tone button if it existed.

fwiw, I've been trimming Apple's to fit in squares, but I also have my own system for sizing icons that does not use the standard Apple margins but still follows the Apple sizing guidelines. BTT definitely does not handle icons exactly like the native Touch Bar does, so I don't think Apple's margins will produce accurate results here.

All Touch Bar icons are between 18-22pt, sized to look optically similar (so standard @2x icon will be 36-44px):

Personally, this is how I prepare the icons:

  1. Trim transparent pixels
  2. If the aspect ratio of the icon is close to square, make the canvas size a square
    2a. If the aspect ratio of the icon is wide (a la the show desktop icon), keep the canvas rectangular.
  3. In BTT, as long as you have "keep aspect ratio" enabled, the height and width can be the same value and it will fit the icon inside the square.
  4. Drop your trimmed icon into BTT and set the size between 18x18px and 22x22px.

Here is Apple's HIG for sizing Touch Bar icons for reference, which does include the sizes for many standard icons: https://developer.apple.com/design/human-interface-guidelines/macos/touch-bar/touch-bar-icons-and-images/

Finally, @idhun90 I got the AirPods and case icons, but they are way too small to be used on the Touch Bar at 18x20px :frowning:

airpodsCase-82795B5D88

0 Likes

#20

thank u!

Yes, 18x20px is too small to use on the Touch Bar

So sad...:sob:

0 Likes

#21

Hi All,

@GoldenChaos
i’ve expanded some of the icons in v2 to a square. Usually its the ones that have the PDF counterpart in the folder.

Apple seems to always have an icon height of 60px (the heigt of the touch bar) but crop the width to the icon, which never exceeds 60px as per the guidelines.

When i found the PDF icons, they where no rules regarding their size apart from their top and bottom padding. some where 50px width and height, some where 100+, but they still had the top and bottom padding.

My system was:

  1. go through all the files and equalise (square) the canvas size for each PDF (e.g. make the biggest width or height same as the smaller width or height)
  2. save as PNG
  3. open with preview
  4. batch resize all heights to 60px.

my plan for v3 is to resize all icons to 60x60px, as per what is stated in the apple guidelines, ( to make resizing easier)

but maybe keep the cropped-width ones for ‘pro’ BTT users who want to mess with widths.

also take a look into photoshop, missed that one :grin: and clean it all up a little. I think i’ll sort it by what the icon is instead of the app it was found it in.

so yeh, thats coming soon. no promises about how soon though, just to let everyone know

1 Like