Created
August 24, 2019 02:22
-
-
Save applch/1147c949f11be203d71f362d24592a58 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| SF Symbols | |
| SF Symbols provides a set of over 1,500 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. | |
| 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. | |
| 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 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. See Symbols for Use As-Is for a list of symbols that can't be customized. For developer guidance, see Creating Custom Symbol Images for Your App. | |
| 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’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 | |
| 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 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 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 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 | |
| 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 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 | |
| A solid triangle inside two concentric circles. The outer circle is dotted and the inner circle is a solid outline. livephoto.play 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 cloud with a padlock inside it. lock.icloud iCloud service | |
| A filled-in cloud with a padlock inside it. lock.icloud.fill iCloud service | |
| 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 | |
| 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 filled-in video camera with a right-to-left question mark inside it. questionmark.video.fill.rtl FaceTime app | |
| A video camera with a right-to-left question mark inside it. questionmark.video.rtl FaceTime app | |
| A telephone handset next to a keyboard. realtimetext Real-time text feature | |
| A compass pointing northeast and southwest. safari Safari browser | |
| A filled-in compass pointing northeast and southwest. safari.fill Safari browser | |
| A teletype. teletype Teletype feature | |
| A video camera. video 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 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 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment