# SF Symbols

Source: https://developer.apple.com/design/human-interface-guidelines/sf-symbols
Skill: hig-foundations
Snapshot: 2025-02-02

---
<!-- hig-doctor:attribution -->
> **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.**

## Variable color

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

## 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.**

---

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