Using SF Symbols in Your App Designs

Chase
2 min readApr 24, 2024

It’s easier than you might think and will help your designs move faster with designs that are closer to the real app.

The text of SF Symbols above an SF Symbol of a wand and stars

Before we get started, please take a couple of seconds to follow me and 👏 clap for the article so that we can help more people learn about this useful content.

Using SF Symbols in your designs

The first step is that we will need the latest version of SF Symbols which can be downloaded here: https://developer.apple.com/sf-symbols/. Keep in mind that certain design tools may already have some form of SF Symbols built in, possibly thanks to community plugins.

Once you have it downloaded simply find the icon you want to use and right click and choose copy image to copy a PNG or if you want to use the vector image (which allows the symbol to look great at any scale) you can choose Copy Image As and then select the SVG option.

A screenshot of the context menu in the SF Symbols app

If you got value from this article, please consider following me, 👏 clapping for this article, or sharing it to help others more easily find it.

If you have any questions on the topic or know of another way to accomplish the same task, feel free to respond to the post or share it with a friend and get their opinion on it. If you want to learn more about native mobile development, you can check out the other articles I have written here: https://medium.com/@jpmtech. If you want to see apps that have been built with native mobile development, you can check out my apps here: https://jpmtech.io/apps. Thank you for taking the time to check out my work!

--

--