SF Symbols

SF Symbols provides a set of over 2,400 consistent, highly configurable symbols you can use in your app. Apple designed SF Symbols to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text in all weights and sizes.

Three rows of the same six symbols shown in various visual configurations. From the left, each row shows the leaf, star circle, link circle, calendar circle, airplane circle, and folder circle symbols. The top row shows the symbols outlined in black and the bottom row shows the symbols filled in black. The middle row shows each symbol filled in with a different color. The leaf uses green, the star uses yellow, the link uses blue, the calendar uses red, the airplane uses orange, and the folder uses purple.

You can use SF symbols to represent tasks and types of content in a variety of UI elements, such as navigation bars, toolbars, tab bars, context menus, and widgets. Throughout the rest of your app, you can use a symbol everywhere you can use an image. SF Symbols are available in iOS 13 and later, macOS 11 and later, watchOS 6 and later, and tvOS 13 and later.

Availability of individual symbols and features varies based on the version of the system you’re targeting. When you export a symbol introduced in SF Symbols 2 as an SVG template and bundle it with your app, you can use it in apps that target iOS 13, Mac Catalyst 13, tvOS 13, or watchOS 6, but without the benefit of SF Symbol 2 features like multicolor support and automatic localization. Visit SF Symbols to download the app and browse the full set of symbols.

SF Symbols 2 introduces over 750 new symbols and includes:

  • Over 150 preconfigured, multicolor symbols that automatically adapt to vibrancy, accessibility settings, and appearance modes
  • Negative side margins in both standard and custom symbols, giving you greater control over horizontal alignment
  • Localized symbol variants for right-to-left writing systems, as well as script-specific symbols for Arabic, Devanagari, and Hebrew

IMPORTANT All SF Symbols shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreements and are subject to the terms and conditions set forth therein. You may not use SF Symbols — or glyphs that are substantially or confusingly similar — in your app icons, logos, or any other trademark-related use. Apple reserves the right to review and, in its sole discretion, require modification or discontinuance of use of any Symbol used in violation of the foregoing restrictions, and you agree to promptly comply with any such request.

A Closer Look at SF Symbols

SF Symbols are available in a wide range of weights and scales to help you create adaptable designs.

Diagram showing the square and arrow up symbol in all weights and scales.

Each of the nine symbol weights — from ultralight to black — corresponds to a weight of the San Francisco system font. This correspondence lets you achieve precise weight matching between symbols and adjacent text, while supporting flexibility for different sizes and contexts.

Each symbol is also available in three scales: small, medium (the default), and large. The scales are defined relative to the cap height of the San Francisco system font. By specifying a scale, you can adjust a symbol's emphasis compared to adjacent text, without disrupting the weight matching with text that uses the same point size. For developer guidance, see imageScale (SwiftUI) and symbolScale (UIKit).

By default, a symbol can use an app's accent color. In SF Symbols 2 and later, you can use multicolor symbols to display images that contain more than one color. For example, the cloud.sun.rain.fill symbol uses white for the cloud, yellow for the sun, and blue for the rain. In some cases, you can use different colors in different areas of a symbol. For example, you might want to specify a color like your app's accent color for the folder area of folder.badge.plus, while the system provides a green color for the badge. For developer guidance, see renderingMode(_:).

By default, multicolor symbols automatically adapt to different appearance modes, like Dark Mode. If you specify a color in a custom symbol that you create, the custom symbol doesn't automatically adapt to different appearance modes.

Creating Custom Symbols

If you need a symbol that isn't provided by SF Symbols, you can create your own. The SF Symbols app lets you export a symbol as a template in a reusable, vector-based file format. To create a custom symbol, export an SF symbol that's similar to the design you want and modify the template using a vector-editing tool like Sketch or Illustrator. Use the result in your app as you would use the original template file. (Custom symbols don't support adaptive color.) For developer guidance, see Creating Custom Symbol Images for Your App. See Symbols for Use As-Is for a list of symbols that can't be customized.

Be guided by the template. Create a custom symbol that's consistent with the system-provided ones in terms of level of detail, optical weight, alignment, position, and perspective. Strive to design a symbol that is:

  • Simple
  • Recognizable
  • Not offensive
  • Directly related to the action or content it represents

To support a wide range of text settings, create custom symbols in as many weights and scales as your app requires. To enable the bold text setting and support Dynamic Type, create symbols in regular, medium, semibold, and bold at all scales. If your app uses additional font weights and scales, create symbols in these weights and scales, too.

Use negative side margins to aid with optical horizontal alignment if necessary. SF Symbols 2 provides negative margins for symbols that include badges or other elements that increase the symbol's width. For example, you might need to use negative margins when horizontally aligning a stack of folder symbols, some of which include a badge. In rare cases where multiple symbols that have negative margins are side by side, you may need to add space or other content between them to avoid collisions.

Don’t use replicas of Apple products. Apple products are copyrighted and can’t be reproduced in your custom symbols.

Provide alternative text labels for custom symbols. Alternative text labels — or accessibility descriptions — aren’t visible, but they let VoiceOver audibly describe what's onscreen, making navigation easier for people with visual impairments.

Symbols for Use As-Is

Some symbols can’t be exported as templates for customization and can be used only to reference Apple technologies as documented below.

Symbol Name Can refer only to Apple's...
A filled-in triangle pointing into three concentric circles from the bottom. airplayaudio AirPlay
A rectangle with a filled-in triangle pointing into it from the bottom. airplayvideo AirPlay
Two AirPods facing away from each other. airpods AirPods
Two AirPods Pro facing away from each other. airpodspro AirPods Pro
A tall rectangle with a very small rectangle in the top-left corner. airport.express AirPort Express
A short rectangle with a smaller rectangle across the top that has a height of about one third the height of the larger rectangle. A small dot appears in the bottom-right corner of the larger rectangle. airport.extreme AirPort Extreme
A tall rectangle with an isosceles trapezoid at the top edge, which suggests a three-dimensional shape. airport.extreme.tower AirPort Extreme
A filled-in outline of an apple with a leaf at the top and a semi-circular area cut out of the right side. applelogo Sign in with Apple
An outline of paper scroll. applescript AppleScript language
A paper scroll filled in with black applescript.fill AppleScript language
A rounded rectangle with a white background that contains the Apple logo followed by the letters T and V in black. appletv Apple TV
A rounded rectangle with a black background that contains the Apple logo followed by the letters T and V in white. appletv.fill Apple TV
An outline of a watch face with a white background. Small black rectangles at the top and bottom edge suggest the watch band. applewatch Apple Watch
An outline of a watch face with a white background. Small black rectangles at the top and bottom edge suggest the watch band. Two short, curved, concentric line segments are shown symmetrically on the left and right sides of the watch. applewatch.radiowaves.left.and.right Apple Watch
An outline of a watch face with a white background. Small black rectangles at the top and bottom edge suggest the watch band. A black slanted line cuts through the watch face from top-left to bottom-right. applewatch.slash Apple Watch
An outline of a watch face with a white background. Small black rectangles at the top and bottom edge suggest the watch band. Black clock hands in the face are positioned to show a time of 10:09. applewatch.watchface Apple Watch
A three-dimensional representation of a cube. arkit ARKit
A cloud with an arrow pointing clockwise inside it. arrow.clockwise.icloud iCloud service
A filled-in cloud with an arrow pointing clockwise inside it. arrow.clockwise.icloud.fill iCloud service
A cloud with an arrow pointing counter clockwise inside it. arrow.counterclockwise.icloud iCloud service
A filled-in cloud with an arrow pointing counter clockwise inside it. arrow.counterclockwise.icloud.fill iCloud service
A video camera with an arrow pointing down and to the left inside it. arrow.down.left.video FaceTime app
A filled-in video camera with an arrow pointing down and to the left inside it. arrow.down.left.video.fill FaceTime app
A video camera with an arrow pointing down and to the right inside it. arrow.down.left.video.rtl FaceTime app
A filled-in video camera with an arrow pointing down and to the right inside it. arrow.down.left.video.fill.rtl FaceTime app
A speech bubble with a white background that contains an upward-pointing black arrow. arrow.up.message Messages app
A speech bubble with a black background that contains an upward-pointing white arrow. arrow.up.message.fill Messages app
A video camera with an arrow pointing up and to the right inside it. arrow.up.right.video FaceTime app
A filled-in video camera with an arrow pointing up and to the right inside it. arrow.up.right.video.fill FaceTime app
A filled-in video camera with an arrow pointing up and to the left inside it. arrow.up.right.video.fill.rtl FaceTime app
A video camera with an arrow pointing up and to the left inside it. arrow.up.right.video.rtl FaceTime app
A cloud with lightning bolt inside it. bolt.horizontal.icloud iCloud service
A filled-in cloud with lightning bolt inside it. bolt.horizontal.icloud.fill iCloud service
Three teardrop shapes whose pointed ends intersect. bonjour Bonjour networking
A white cloud outlined in black with checkmark inside it. checkmark.icloud iCloud service
A black cloud with white checkmark inside it. checkmark.icloud.fill iCloud service
Two black earpods facing away from each other. earpods EarPods
A cloud with an exclamation mark inside it. exclamationmark.icloud iCloud service
A filled-in cloud with an exclamation mark inside it. exclamationmark.icloud.fill iCloud service
A face inside a square that's represented by four corners. faceid Face ID
An outline of a house with two concentric outlines inside it. homekit HomeKit
An outline of a cylinder. homepod HomePod
An outline of a cylinder with a black background. homepod.fill HomePod
A cloud. icloud iCloud service
A cloud with an arrow pointing down from it. icloud.and.arrow.down iCloud service
A filled-in cloud with an arrow pointing down from it. icloud.and.arrow.down.fill iCloud service
A cloud with an arrow pointing up into it. icloud.and.arrow.up iCloud service
A filled-in cloud with an arrow pointing up into it. icloud.and.arrow.up.fill iCloud service
A cloud inside a circle. icloud.circle iCloud service
A cloud inside a filled-in circle. icloud.circle.fill iCloud service
A filled-in cloud. icloud.fill iCloud service
A cloud with a slash across it. icloud.slash iCloud service
A filled-in cloud with a slash across it. icloud.slash.fill iCloud service
A tall rectangle outlined in black that has a short black line centered inside the bottom edge. ipad iPad
A tall rectangle outlined in black. The top and bottom edges are twice as thick as the side edges. Centered in the bottom edge is a white dot. ipad.homebutton iPad
A wide rectangle outlined in black. The side edges are twice as thick as the top and bottom edges. Centered in the right edge is a white dot. ipad.homebutton.landscape iPad
A wide rectangle outlined in black. Centered inside the bottom edge is a short black line. ipad.landscape iPad
A small rectangle taller than it is wide, outlined in black that has a short black line centered inside the top edge and inside the bottom edge. iphone iPhone
A small rectangle taller than it is wide, outlined in black. The top and bottom edges are thicker than the side edges. Centered in the top edge is a short white line and centered in the bottom edge is a white dot. iphone.homebutton iPhone
A small rectangle taller than it is wide, outlined in black. The top and bottom edges are thicker than the side edges. Centered in the top edge is a short white line and centered in the bottom edge is a white dot. Two short, curved, concentric line segments are shown symmetrically on the left and right sides of the rectangle. iphone.homebutton.radiowaves.left.and.right iPhone
A small rectangle taller than it is wide, outlined in black. The top and bottom edges are thicker than the side edges. Centered in the top edge is a short white line and centered in the bottom edge is a white dot. A black slanted line cuts through the rectangle from top-left to bottom-right. iphone.homebutton.slash iPhone
A small rectangle taller than it is wide, outlined in black. A short black line is centered inside the top  and bottom edge. Two short, curved, concentric line segments are shown symmetrically on the left and right sides of the rectangle. iphone.radiowaves.left.and.right iPhone
A small rectangle taller than it is wide, outlined in black that has a short black line centered inside the top edge and inside the bottom edge. A black slanted line cuts through the rectangle from top-left to bottom-right. iphone.slash iPhone
A small rectangle taller than it is wide, outlined in black. The top half of the rectangle is white and the bottom half is black with a white circle. ipod iPod
A small rectangle taller than it is wide, outlined in black. A small circle is centered near the top. ipodshuffle.gen1 iPod shuffle
A small rectangle wider than it is tall, outlined in black. A small circle is centered near the right edge. ipodshuffle.gen2 iPod shuffle
A small rectangle taller than it is wide, outlined in black. ipodshuffle.gen3 iPod shuffle
A small square outlined in black. A circle is centered in it. ipodshuffle.gen4 iPod shuffle
A small rectangle taller than it is wide, outlined in black. The top and bottom edges are thicker than the side edges. Centered in the top edge is a short white line and centered in the bottom edge is a white dot. ipodtouch iPod touch
A white cloud with a black key inside it. key.icloud iCloud service
A black cloud with a white key inside it. key.icloud.fill iCloud service
A wide rectangle outlined in black with a shorter, narrower rectangle in front on the right. laptopcomputer.and.iphone iPhone
A cloud with a two-link chain inside it. link.icloud iCloud service
A filled-in cloud with a two-link chain inside it. link.icloud.fill iCloud service
Three concentric circles. The outermost circle is dotted and the inner two circles are solid outlines. livephoto Live Photos feature
Three concentric circles. The outermost circle is dotted and the inner two circles are solid outlines. A white capital letter A inside a black circle is in the bottom-left corner. livephoto.badge.a Live Photos feature
A solid triangle inside two concentric circles. The outer circle is dotted and the inner circle is a solid outline. livephoto.play Live Photos feature
Three concentric circles with a slash across them. The outermost circle is dotted and the inner two circles are solid outlines. livephoto.slash Live Photos feature
A cloud with a padlock inside it. lock.icloud iCloud service
A filled-in cloud with a padlock inside it. lock.icloud.fill iCloud service
A wide, short rectangle outlined in black. A small black dot is in the bottom-right corner. macmini Mac mini
A wide, short rectangle filled with black. A small white dot is in the bottom-right corner. macmini.fill Mac mini
A Mac Pro outlined in black. A small black Apple logo is centered in it. macpro.gen1 Mac Pro
A tall cylinder outlined in black. A small black oval is centered at the top edge. macpro.gen2 Mac Pro
A tall black cylinder. A small black oval is centered at the top edge. macpro.gen2.fill Mac Pro
A Mac Pro outlined in black. A small black Apple logo is centered in it. macpro.gen3 Mac Pro
A wide rectangle outlined in black. A short black vertical line is inside both side edges of the rectangle and three horizontal rows of dots are between the vertical lines. macpro.gen3.server Mac Pro
An empty speech bubble. message Messages app
A filled-in speech bubble inside a circle. message.circle Messages app
A speech bubble inside a filled-in circle. message.circle.fill Messages app
A filled-in speech bubble. message.fill Messages app
The pencil tip symbol used in Markup. pencil.tip Markup feature
A circled pencil tip. pencil.tip.crop.circle Markup feature
A circled pencil tip, badged with a minus sign. pencil.tip.crop.circle.badge.minus Markup feature
A circled pencil tip, badged with a plus sign. pencil.tip.crop.circle.badge.plus Markup feature
A cloud with a person inside it. person.icloud iCloud service
A filled-in cloud with a person inside it. person.icloud.fill iCloud service
An empty speech bubble. plus.message Messages app
An empty speech bubble. plus.message.fill Messages app
A video camera with a left-facing question mark inside it. questionmark.video FaceTime app
A video camera with a right-facing question mark inside it. questionmark.video.ar FaceTime app
A filled-in video camera with a left-facing question mark inside it. questionmark.video.fill FaceTime app
A filled-in video camera with a right-facing question mark inside it. questionmark.video.fill.ar FaceTime app
A compass pointing northeast and southwest. safari Safari browser
A filled-in compass pointing northeast and southwest. safari.fill Safari browser
Silhouette of a bird filled in with black, flying toward the bottom-right. swift Swift programming language
Two horizontal rows of black dots with a black telephone handset above them. teletype Teletype feature
Two horizontal rows of black dots with a black telephone handset in the bottom-left corner, facing up. teletype.answer Teletype feature
Two horizontal rows of black dots with a black telephone handset above them all within a black circle. teletype.circle Teletype feature
Two horizontal rows of white dots with a white telephone handset above them on top of a black disk. teletype.circle.fill Teletype feature
Curved black lines in a concentric arrangement that suggests a finger print. touchid Touch ID feature
A video camera. video FaceTime app
A video camera, badged with a checkmark. video.badge.checkmark FaceTime app
A video camera, badged with a plus sign. video.badge.plus FaceTime app
A video camera inside a circle. video.circle FaceTime app
A video camera inside a filled-in circle. video.circle.fill FaceTime app
A filled-in video camera. video.fill FaceTime app
A filled-in video camera, badged with a checkmark. video.fill.badge.checkmark FaceTime app
A filled-in video camera, badged with a plus sign. video.fill.badge.plus FaceTime app
A video camera with a slash across it. video.slash FaceTime app
A filled-in video camera with a slash across it. video.slash.fill FaceTime app
A cloud with an X inside it. xmark.icloud iCloud service
A filled-in cloud with an X inside it. xmark.icloud.fill iCloud service
A rectangular solid outlined in black with three horizontal rows of black dots on the front face. xserve Xserve