{"id":33208,"date":"2021-07-26T14:49:37","date_gmt":"2021-07-26T18:49:37","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=33208"},"modified":"2021-07-26T14:51:53","modified_gmt":"2021-07-26T18:51:53","slug":"smaller-preferences-tab-icons-in-big-sur","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2021\/07\/26\/smaller-preferences-tab-icons-in-big-sur\/","title":{"rendered":"Smaller Preferences Tab Icons in Big Sur"},"content":{"rendered":"<p><a href=\"https:\/\/bjango.com\/articles\/macpreferencestabicons\/\">Marc Edwards<\/a>:<\/p>\n<blockquote cite=\"https:\/\/bjango.com\/articles\/macpreferencestabicons\/\">\n<p>I believe macOS Big Sur changed the prefs tab icon size, and because of that, most Mac apps now have blurry icons. I was unable to find a size in the <a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/macos\/\">macOS Human Interface Guidelines<\/a>, but dropping a solid image into your Xcode project reveals the full image area for the asset. In this case, it&rsquo;s 54&#xD7;54 pixels on a Retina display, which means prefs tab icon assets need to be exactly 27&#xD7;27pt to render sharply. Please note that the icons themselves are only around 22&#xD7;22pt, with the additional space just being padding.<\/p>\n<\/blockquote>\n<p>I found it tricky to make a custom icon look right next to an SF Symbol. Vectors help it look sharp at different resolutions, but they don&rsquo;t help with scaling. It really has to be drawn at the desired size or the stroke widths will be off. And this applies recursively: you can&rsquo;t just draw a sub-element and then scale it to the right size, or its strokes won&rsquo;t match the rest of the icon. Naive scaling of a vector icon actually looks worse than scaling down a bitmap.<\/p>\n<p>Previously:<\/p>\n<ul>\n<li><a href=\"https:\/\/mjtsai.com\/blog\/2019\/06\/10\/sf-symbols\/\">SF Symbols<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>Marc Edwards: I believe macOS Big Sur changed the prefs tab icon size, and because of that, most Mac apps now have blurry icons. I was unable to find a size in the macOS Human Interface Guidelines, but dropping a solid image into your Xcode project reveals the full image area for the asset. In [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2021-07-26T18:49:42Z","apple_news_api_id":"9795a70b-c2a2-45a0-80df-14cd666e71db","apple_news_api_modified_at":"2021-07-26T18:51:57Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAA==","apple_news_api_share_url":"https:\/\/apple.news\/Al5WnC8KiRaCA3xTNZm5x2w","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[34,545,30,1891,71,1822],"class_list":["post-33208","post","type-post","status-publish","format-standard","hentry","category-technology","tag-graphicdesign","tag-icons","tag-mac","tag-macos-11-0","tag-programming","tag-sf-symbols"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/33208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=33208"}],"version-history":[{"count":2,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/33208\/revisions"}],"predecessor-version":[{"id":33217,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/33208\/revisions\/33217"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=33208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=33208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=33208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}