skills.rest
rshankras
rshankrasCOMMUNITY
Explore all skills by this author →
Website𝕏@rshankraGitHub

sf-symbols

Select, configure, animate, and author SF Symbols for Apple platform interfaces.

696|66|Updated Oct 29, 2025
Search Tags:#SwiftUI#iconography#sf symbols#rendering modes#Apple design#custom symbols#symbol animation
One-click install
npx skills add https://github.com/rshankras/claude-code-apple-skills --skill sf-symbols
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-symbols
Source: https://github.com/rshankras/claude-code-apple-skills/tree/main/skills/design/sf-symbols
Command: npx skills add https://github.com/rshankras/claude-code-apple-skills --skill sf-symbols

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Choosing and configuring the right iconography across iOS, macOS, and other Apple platforms is error-prone, and authoring custom symbols that interpolate correctly across weights and scales requires following a strict, easy-to-break workflow.

Core Features & Use Cases

  • System symbol selection and configuration: Guidance on rendering modes (monochrome, hierarchical, palette, multicolor), gradients, and variable values for rendering magnitudes like signal strength or progress.
  • Custom symbol authoring: A 6-step checklist covering template export, drawing three interpolation sources, outlining paths, unified annotation, guide points for Draw On/Off, and template version export.
  • Animation vocabulary: Coverage of symbol effect presets (Bounce, Pulse, Variable Color, Replace, Draw On/Off) and behavior classes for state transitions like mute/unmute.
  • Use Case: When a needed glyph does not exist in the 7,000+ system symbols, follow the authoring workflow to build a custom symbol that interpolates across all 27 weight and scale variants like a native system symbol.

Quick Start

Ask the assistant to recommend and configure an SF Symbol for a toolbar button that shows playback progress using a variable value.

Frequently Asked Questions about sf-symbols

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom SF Symbol for my iOS app?▼

Start from the closest system symbol in the SF Symbols app and export a template. Draw three sources (Ultralight-Small, Regular-Small, Black-Small) with identical path and point counts, outline all strokes, annotate layers, then export the current template version for Xcode.

How do I animate SF Symbol state changes in SwiftUI?▼

Use .contentTransition(.symbolEffect(.replace)) when swapping symbol states such as mute and unmute. Prefer Magic Replace, which preserves matching enclosures and uses Draw Off/On where supported, for smoother state pair transitions.

What are the SF Symbols rendering modes and when should I use each?▼

SF Symbols support monochrome, hierarchical, palette, and multicolor rendering modes. Hierarchical works well in toolbars with opacity-derived depth, palette allows two to three explicit colors, and multicolor uses intrinsic colors suited to content areas.

Why does my custom SF Symbol fail to interpolate across weights?▼

Interpolation fails when the three source drawings have mismatched numbers or ordering of paths and points. Copy paths from Regular-Small and only move points in the other sources, never adding or removing them.

Can SF Symbols render a changing value like signal strength or progress?▼

Yes, pass a variableValue between 0 and 1 to render magnitude, with thresholds distributed evenly across the symbol. SF Symbols 7 also adds Variable Draw, which renders the path at a percentage as an alternative for progress or temperature.

Related Skills

Explore More Design & Creative Skills→
tiantangcao1980-webtiantangcao1980-web
4

nutui-icons

Integrate NutUI Icons into Vue and React projects with tree-shakeable SVG imports.

Community
Basic
MinhAnh-CorpMinhAnh-Corp

mobile-ios-design

Align iOS interfaces with Apple's Human Interface Guidelines and SwiftUI patterns.

Official
Intermediate
kmshdevkmshdev
1

swiftui-iconography-api

Standardizes SF Symbols usage in SwiftUI with rendering modes, variants, and effects.

Community
Intermediate
AdobeDocsAdobeDocs

use-case-icon-generator

Generate icon specifications and image-generation prompts for industry use cases.

Official
Intermediate