Maybe we should size up (down) the PDFs properly first then figure out whats wrong.
(someone more experienced to do this?)
The example only seems to test something else not directly related to this icon pack.
Yes of course it’s not an assignment. I’m sorry if I gave you that impression. The intention was to show you first-hand what the issue was as I’ve found that’s a more effective means of conveying an idea (clearly not so much in this case).
Anyway, there’s a few issues that I’ve discovered as part of this investigation @Andreas_Hegenberg:
I’m not entirely clear on when images are being scaled by BTT, but:
- Importing correctly-sized icons into BTT v2.6xx and v2.5xx via drag-and-drop doesn’t seem to preserve pixel alignment. This is one of the problems that @GoldenChaos was seeing above. Speculation: it could be a problem with base64 encoding the images which seems wonky.
- Icons that are downscaled by BTT v2.6xx and v2.5xx (looks like bicubic or something) result in some anti-aliasing. However, this might not be trivial to fix.
This is how I imported my pixel-aligned test icon which works around the above resizing issues in BTT:
- Resize to 42px. You may need to use a program that doesn’t perform interpolation when downsampling (Preview unfortunately does this).
- Use ImageOptim to compress the PNG. (optional)
- Use a tool to base64 encode the image: base64 image decoder encoder online
- Copy the base64 string and replace all
/with\/ - Export an existing button/widget JSON and replace the
BTTIconDatawith the new base64 string. - Import the new JSON into BTT.
I tested the above for both v2.536 and v2.6xx releases of BTT.
1 Like
No worries. The whole process uncovered these bugs, so the strategy worked even better than you could have hoped 
great work!
1 Like
Ah! That's just a stupid bug, not related to base64 though. (when dragging onto the image box, BTT always resizes if the image is bigger than 70px, this is ancient behavior from BTT Remote, and I never adapted it for the Touchbar apparently :-))
Will fix that tomorrow.
2 Likes
So, is this all resolved?
Was it a BTT issue or an issue with the icon pack?
If it's the Icon pack then please let me know and i'll attempt to fix it up. I guess you should guide me through that too because you to clearly have a better understanding of aliasing and image rendering than me
Anyway, i'm off to school now so I'll check back later today,
cya!
A bit of both. The ones in the pack show slight anti-aliasing, perhaps due to resizing or the program used for exporting:
Most of the original PDFs appear to be pixel aligned but of varying dimensions, as you noted earlier. I personally use Adobe Illustrator for iconography, but Inkscape (or some other free software) should be able to both open and export the PDF assets. Basically:
- Export the asset as a PNG with a 1x scaling factor. This will usually preserve pixel alignment for these specific icons.
- If you want the bounding box for icons to be consistent, you can use an image editor (e.g. Photoshop, GIMP) to pad the canvas size for each exported PNG.
For example, an exported pixel aligned magic wand from Photos (44px/44px):
You might notice that some of the system Touch Bar icons aren’t actually pixel aligned. These were probably old assets that Apple didn’t intend to be displayed at Touch Bar dimensions. For example, the Photos crop/rotate icon is clearly designed for twice the size (72px/90px) that it gets rendered in the Touch Bar:
In those cases, you’d need to manually re-create the system icons in a vector graphics editor like Illustrator. This is my 10 min version of the crop/rotate icon. (I’m just an engineer and don’t usually do graphics work. Some of the designers I’ve worked with would probably take half that time and do a better job. 
)
Comparison to the one in the pack (on the left):
2 Likes
Cool, I’ll see what I can do. I do have illustrator, by the way.
I don’t know if I have the time for pixel-perfecting every icon, but I’ll get to the reletivley bad PDF conversions in the meantime.
Keep in touch as I may ask for more help.
Thanks for the feedback everybody!
thank you for that set!
could you please add bluetooth enable/disable icons?
I don’t think there are large native apple touchbar icons for bluetooth, but I might add in the ones from GoldenChaos-BTT.
I'm new here, please, after I download the icons package where do I install it so it can be used in BTT?
Is there a proper folder to install? Will it appear like the other icons already in BTT?
1 Like
Welcome!
Nope, these are "just" icons @yuuiko got out of the macOS System. You can use them as the icons you want to see in your TouchBar triggers.
You can save them wherever you want, and when you create a new trigger, just drag and drop the desired icon into this box I marked.
Attention, in the advanced configuration you might have to adjust their size. I usually go with 28x28, or 30x30 depending on the icon.
2 Likes
30x30 is the recommended size to make sure they are rendered pixel perfectly!
Make sure: don’t use for other reasons than for BTT as it’s probably property of apple.
2 Likes
Thank you very much for the explanation.
1 Like
why not use the SF Symbols App and use the symbol name for icons instead of base64
This was released long before SF symbols feature, or even SF symbols itself existed
oh okey, sorry for that
1 Like