SF Symbols

SF Symbols provides a set of over 1000 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 for all weights and sizes. 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.

You can use SF Symbols in apps running in iOS 13 and later, watchOS 6 and later, and tvOS 13 and later. To browse the full set of symbols, download the SF Symbols app.

SF Symbols come in nine weights—from ultralight to black—each of which 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, 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.

You can use SF symbols to represent tasks and types of content in a variety of specific places, such as navigation bars, toolbars, tab bars, context menus, and Home Screen Quick Actions. Throughout the rest of your app, you can use a symbol everywhere you can use an image.

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 a 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. 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.

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 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 be used only to reference Apple technologies and can’t be exported as templates for customization. The symbols documented below shall be considered to be system-provided images as defined in the Xcode and Apple SDKs license agreement (available here) and are subject to the terms and conditions set forth therein.

Symbol Name Can refer only to Apple's...
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 plus sign. pencil.tip.crop.circle.badge.plus Markup feature
A circled pencil tip, badged with a minus sign. pencil.tip.crop.circle.badge.minus Markup feature
An open book. book Apple Books
A filled-in open book. book.fill Apple Books
A cloud. icloud iCloud service
A filled-in cloud. icloud.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 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 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 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 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
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
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
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 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 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 telephone handset. phone Phone app
A filled-in telephone handset. phone.fill Phone app
A telephone handset inside a circle. phone.circle Phone app
A telephone handset inside a filled-in circle. phone.circle.fill Phone app
A telephone handset with an arrow pointing up and to the right from it. phone.arrow.up.right Phone app
A filled-in telephone handset with an arrow pointing up and to the right from it. phone.arrow.up.right.fill Phone app
A telephone handset with an arrow pointing down and to the left from it. phone.arrow.down.left Phone app
A filled-in telephone handset with an arrow pointing down and to the left from it. phone.arrow.down.left.fill Phone app
A telephone handset with an arrow pointing to the right from it. phone.arrow.right Phone app
A filled-in telephone handset with an arrow pointing to the right from it. phone.arrow.right.fill Phone app
A telephone handset, badged with a plus sign. phone.badge.plus Phone app
A filled-in telephone handset, badged with a plus sign. phone.badge.plus.fill Phone app
A telephone handset facing down. phone.down Phone app
A filled-in telephone handset facing down. phone.down.fill Phone app
A telephone handset facing down inside a circle. phone.down.circle Phone app
A telephone handset facing down inside a filled-in circle. phone.down.circle.fill Phone app
A teletype. teletype Teletype feature
A telephone handset next to a keyboard. realtimetext Real-time text feature
A video camera. video FaceTime app
A filled-in video camera. video.fill 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 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 video camera, badged with a plus sign. video.badge.plus FaceTime app
A filled-in video camera, badged with a plus sign. video.badge.plus.fill FaceTime 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 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 a question mark inside it. questionmark.video FaceTime app
A filled-in video camera with a question mark inside it. questionmark.video.fill FaceTime app
A video camera with a right-to-left question mark inside it. questionmark.video.rtl FaceTime app
A filled-in video camera with a right-to-left question mark inside it. questionmark.video.fill.rtl FaceTime app
A closed envelope. envelope Mail app
A filled-in closed envelope. envelope.fill Mail app
A closed envelope inside a circle. envelope.circle Mail app
A closed envelope inside a filled-in circle. envelope.circle.fill Mail app
An open envelope. envelope.open Mail app
A filled-in open envelope. envelope.open.fill Mail app
A closed envelope, badged with a filled-in circle. envelope.badge Mail app
A filled-in closed envelope, badged with a circle. envelope.badge.fill Mail app
A compass pointing northeast and southwest. safari Safari browser
A filled-in compass pointing northeast and southwest. safari.fill Safari browser
A rectangle with a filled-in triangle pointing into it from the bottom. airplayvideo AirPlay
A filled-in triangle pointing into three concentric circles from the bottom. airplayaudio AirPlay
A three-dimensional representation of a cube. arkit ARKit
Three concentric circles. The outermost circle is dotted and the inner two circles are solid outlines. livephoto Live Photos
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
A solid triangle inside two concentric circles. The outer circle is dotted and the inner circle is a solid outline. livephoto.play Live Photos
A face inside a square that's represented by four corners. faceid Face ID