SF Symbols

FoundationsFoundations

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/sf-symbols. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

SF Symbols

Rendering modes

Confirm that a symbol’s rendering mode works well in every context.

Gradients

Variable color

Use variable color to communicate change — don’t use it to communicate depth.

Weights and scales

Design variants

  • The outline variant works well in toolbars, lists, and other places where you display a symbol alongside text.

  • Symbols that use an enclosing shape — like a square or circle — can improve legibility at small sizes.

  • The solid areas in a fill variant tend to give a symbol more visual emphasis, making it a good choice for iOS tab bars and swipe actions and places where you use an accent color to communicate selection.

Animations

  • Down-up, where the outgoing symbol scales down and the incoming symbol scales up, communicating a change in state.

  • Up-up, where both the outgoing and incoming symbols scale up. This configuration communicates a change in state that includes a sense of forward progression.

  • Off-up, where the outgoing symbol hides immediately and the incoming symbol scales up. This configuration communicates a state change that emphasizes the next available state or action.

Apply symbol animations judiciously.

Make sure that animations serve a clear purpose in communicating a symbol’s intent.

Use symbol animations to communicate information more efficiently.

Consider your app’s tone when adding animations.

Custom symbols

Use the template as a guide.

  • Simple

  • Recognizable

  • Inclusive

  • Directly related to the action or content it represents

Assign negative side margins to your custom symbol if necessary.

Optimize layers to use animations with custom symbols.

Test animations for custom symbols.

Avoid making custom symbols that include common variants, such as enclosures or badges.

Provide alternative text labels for custom symbols.

Don’t design replicas of Apple products.

Platform considerations

Resources

Developer documentation

Videos

Change log


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/sf-symbols

Get HIG guidance in your AI

Install Apple HIG Skills and get expert design guidance directly in Claude Code.

npx skills add raintree-technology/apple-hig-skills
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.