Use SF Symbols to enhance your interface design – Discover
Symbols are visual guides that help us navigate wordless experiences. Whether people are seeing an image on a traffic sign or an icon in your app, people have familiar and easy-to-understand symbols to provide contextual information and help them find their way.
SF Symbols offers designers and developers consistent, customizable symbols that seamlessly integrate with the system’s San Francisco font. These symbols are a great resource whether you’re a veteran designer or working primarily on Xcode. The library eliminates the need to reimagine, resize, and reinvent graphics assets by providing a flexible range of weights and scales and automatic vertical alignment when adapting interfaces to different screen sizes.
Find the correct symbol
With over 2,400 symbols, each available in nine weights and three scales, SF Symbols offers a variety of options to suit your needs. You can easily navigate or quickly search and copy any of the vector-based icons in the SF Symbols application and paste them into popular applications such as Sketch, Adobe XD, or Figma, where they automatically align with your text.
Use the SF Symbols app to browse and preview your selections before placing them in your project. There are many symbols in both schema and padding variants that can be used in different contexts. The outlined symbols have similar features to the text, while the full symbols provide additional contrast and emphasis.
Tip: When it comes to symbol styles, less is more. Try to maintain a unique style to help unify your design within a specific component or context.
Aim for symbols that achieve immediate recognition; opt for design clarity over creativity. What message do you want this symbol to convey? Does anyone new to your application know you? If not, is there a different symbol that is more in tune with what one might expect from this icon?
Design custom symbols
If you need to create a custom symbol for your application, the SF Symbols application can help you get started. Find a symbol that looks similar to the one you want to represent, and then export it as a customizable vector-based template.
Using a vector editing tool such as Illustrator or Sketch, make the changes you need while maintaining a scale and weight consistent with the symbol you are modifying. Strive to create a symbol that is simple, recognizable, and clearly related to the action or content it represents. Note how the SVG layer tree is named and organized; custom symbols must match the structure of the original file.
Create custom symbol images for your application
Design with SF symbols
Working alone or in collaboration, designers and developers will appreciate the simplicity and adaptability of SF symbols. You can use SF Symbols on apps running iOS 13 and later, watchOS 6 and later, and tvOS 13 and later, and you can use SF Symbols on macOS Big Sur this fall.
Learn more about SF symbols
Introduction to uniform type identifiers
Download SF Symbols