SF Menu Bar

SF Menu Bar for Mac

System image symbol browser.

SF Menu Bar - Hacknicity



Introduction

SF Menu Bar is a menu bar app which, with a single click or keyboard shortcut, displays a window for browsing and searching SF Symbols. Select a symbol to copy its name or unicode character to the clipboard, ready to paste into your code or design tool.

It can be very difficult to keep up with all the changes to SF Symbols over time. New symbols are added in both major and minor iOS/macOS versions. Existing symbols sometimes get renamed. Apple’s own SF Symbols Mac app is not always up-to-date. By focusing on the latest SF Symbols data set and the latest symbol names, it effectively assumes that developers only neeed to support the very latest iOS and macOS versions in their apps. Information on earlier names for renamed symbols is available in a side bar, but that is easy to miss.

Imagine you are developing an app with a minimum deployment version of iOS 14.3. The symbols added in iOS 14.5 and later cannot be used (without conditional compilation and/or falling back to alternate symbols). Any SF Symbol browsing app which shows them is just making it more difficult to find symbols you can use. When you do find a symbol you can use, you must also ensure you don’t accidentally use a newer name if that symbol has been renamed. SF Menu Bar makes this easy. Simply select the SF Symbol data set that is equal to, or earlier than, your mininum deployment version (iOS 14.2 in this example) and the app will not display any symbols added in later versions, and will use names that were valid as of that version.

Main Window

SF Menu Bar Main Window

Click the SF Menu Bar icon or use a keyboard shortcut configured in the Preferences window to open the main window in a popover. The display is split into several areas:

  • A search field which can be used to reduce the number of symbols displayed.
  • A button which opens the Actions Menu.
  • The SF Symbols in the currently-selected data set and category that match the search.
  • A toolbar with controls to choose the SF Symbols Data Set, Category and Render Mode. On macOS 13 there’s also a control for configuring variable color mode and percentage.

SF Menu Bar is very easy to use:

  • Narrow down the set of symbols displayed by entering some search terms. The app uses a smart search algorithm based on word prefixes. For example, searching for pen will match pencil, pentagon.fill and applepencil, but will not match envelope.open.
  • Select a symbol to copy its name. The name that is copied is the most recent name for the symbol in the data set being viewed.
  • Alternatively, drag a symbol from the window into your source code to insert the name at the position you drop it. Drop in the menu bar to cancel a drag.
  • Hover over a symbol to reveal a tooltip showing the name that will be copied if it is selected and other properties of the symbol: deprecated names, version availability, categories, localizations and render modes.
  • More of a keyboard person? Tab to move focus between the search field and symbols view and use the cursor keys to highlight a symbol. Hit Return to copy its name or Shift‑Return to copy its unicode character.
  • If you use PureSwiftUI or SFSafeSymbols for type-safe symbol names, the format of names copied by SF Menu Bar can be configured in Preferences.
  • Once a name or symbol has been copied to the clipboard, focus is automatically returned back to the previous app. Hit Command‑V to paste the name or symbol.
  • If Universal Clipboard is enabled, the name or symbol can be pasted on another Mac or iOS device (for example, into Apple’s Playgrounds app on iPad).
  • The size of symbols, number of columns and rows can be configured in Preferences or from the Layout submenu in the Actions Menu. These actions have keyboard shortcuts.
  • The keyboard shortcuts for copying a name or symbol, and whether a drag copies the name or symbol, can be configured in Preferences.
  • Drag the popover away from the menu bar to detach its window. The window will remain on top of other windows until you close it. Use the menu bar icon or keyboard shortcut to move keyboard focus back to SF Menu Bar.

Right click (or hit Command‑Return) to show a contextual menu with information about the symbol (the same as the tooltip described above) and more actions:

  • Copy Name copies the name. For symbols that have been renamed in the data set being viewed (or earlier), choose the required iOS/macOS version from the Copy Name submenu. If you need to work with symbols that are only available in an older iOS or macOS version, it is simplest to just choose an older data set.
  • Copy Symbol copies the unicode character for a symbol.
  • Add to Favorites or Remove from Favorites adds/removes the symbol to/from the Favorites smart collection.
  • Add to Collection adds the symbol to a new or existing custom collection.
  • When viewing a custom collection, Remove from Collection removes a symbol from the collection. Use Remove all Symbols from the Actions Menu to remove all the symbols.

Favorites and custom collections are shared with Adaptivity running on the same Mac.

Data Sets

SF Menu Bar: Data Sets

There are many different versions of SF Symbols. Which symbols you can use, and which names must be used to refer to them, varies with the data set:

  • Use the popup menu in the toolbar to select an SF Symbols data set by iOS or macOS version (configurable in Preferences).
  • Hover over a choice to reveal a tooltip showing the corresponding SF Symbols version.
  • There are more iOS data sets than macOS because a single macOS version often includes changes from multiple iOS versions. For example, macOS 13.0 includes the SF Symbols added in iOS 16.0 and 16.1 (SF Symbols version 4.0 and 4.1).

SF Menu Bar will only show symbols that are available in the selected data set. When copying names, the name that is appropriate for that data set will be used; any renamings that occurred in later versions will be ignored.

Categories

SF Menu Bar: Categories

Apple’s SF Symbols app groups symbols by category. SF Menu Bar has the same categories:

  • Use the popup menu in the toolbar to select a category.
  • Hover over a choice to reveal a tooltip showing the number of symbols in that category (in the currently-selected data set).

SF Menu Bar also has some smart collections, which group symbols by various properties:

  • Restricted: symbols which can only be used in reference to specific Apple products.
  • Unrestricted: symbols which can be used for any purpose.
  • Uncategorized: symbols which are not included in any of the categories. The “All”, “What’s New”, “Multicolor”, “Hierarchical / Palette” and “Variable” categories are ignored when determining uncategorized symbols.
  • Language localized: symbols which have localizations into other languages.
  • Right-to-left localized: symbols which flip content horizontally in right-to-left languages.
  • Added: symbols which were added in the data set being viewed. Apple sometimes uses the What’s New category in a particular data set to refer to added symbols, but in older versions it also included any symbols which were renamed or supported additional render modes. The Added smart collection lists just added symbols.

A Favorites collection groups together all your favorite symbols. Create your own custom collections of symbols using the New Collection action from the Actions Menu. Individual symbols can be added from the contextual menu. Favorites and custom collections are shared with Adaptivity running on the same Mac.

Actions Menu

SF Menu Bar: Actions Menu

A button in the toolbar reveals a menu with other actions:

  • Add a custom collection.
  • When viewing a custom collection, rename it, delete it or remove all its symbols.
  • Copy the names or unicode characters of all the symbols that match the search.
  • Increase or decrease the symbol size, number of columns and number of rows without having to open the Preferences window. These actions have keyboard shortcuts.
  • Open the Preferences window.
  • If Adaptivity is installed, selecting Open Adaptivity will open it. If Adaptivity is not installed, selecting View Adaptivity will show it in the App Store.
  • Links to the PureSwiftUI and SFSafeSymbols type-safe symbol libraries.
  • A link to this User Guide.
  • An About window which shows the app version and some credits.
  • An link to the App Store to leave a rating or review (which would be very appreciated).
  • Quit the app.

Preferences

SF Menu Bar: Preferences

There are some preferences that affect SF Menu Bar’s behaviour and appearance:

  • SF Menu Bar can automatically start at login.
  • Match deprecated symbol names when searching.
  • Browse data sets by iOS or macOS version.
  • The symbol size: Small, Medium (default), Large, Very Large, Extra Large or Enormous.
  • The number of columns and rows of symbols. An extra half row can be added to hint that vertical scrolling is possible.
  • Toolbar placement: Top or Bottom (default).
  • Render mode and colors. The available choices depends on the version of macOS.
  • Toggle displaying annotations to show symbol names or identify favorite, restricted and localized symbols.
  • Keyboard shortcuts to copy the name or symbol.
  • Whether a click or drag and drop copies the name or symbol.
  • Copied name format: Apple (default), PureSwiftUI or SFSafeSymbols. Surrounding quotation marks can be included when copying the Apple name. A leading period can be included when copying a type-safe name.
  • Separator when copying multiple names: Line Feed (default), Comma, Comma and Space or Comma and Line Feed.

A keyboard shortcut can be configured to open SF Menu Bar’s window:

  • Press the Record Shortcut button and press the key combination you want to configure.
  • Choose a key combination that is not already used by the system or has an existing meaning within another application. Using two or more modifier keys helps avoid problems. For example, I have chosen to use ^⌥⌘S.

Other Resources

I have written in detail about the changes in different versions of SF Symbols:

Adaptivity is an invaluable tool for developers and designers. It contains a comprehensive SF Symbols browser with even more features than SF Menu Bar. Favorites and custom collections are shared between SF Menu Bar and Adaptivity running on the same Mac.

Adaptivity also has tools to visualise how Size Classes and margins for layout, readable content and the safe area look on real devices and how they change with respect to orientation, iPad multitasking and Dynamic Type size changes. There are also views for visualising Dynamic Type styles, System Colors, System Fonts and System Materials.

Privacy Policy

Information Collected

SF Menu Bar does not collect any personal information or app usage metrics.

Changes to this Policy

If I decide to change this privacy policy, I will post those changes on this page. Summary of changes so far:

March 22, 2022: First published.

Press Kit

If you are interested in writing about SF Menu Bar, there is more information and screenshots in the Press Kit.

I hope you enjoy using SF Menu Bar. If you have any questions or comments please use the support mail address in the Contact section of this web page.