What platforms are supported by these symbol effects?

It covers modern Apple platforms including iOS, iPadOS, watchOS, and tvOS, detailing specific version requirements for newer effects like Wiggle and Draw.

Can it help with custom symbols created in the SF Symbols app?

Absolutely. It provides guidance on the authoring workflow, template layers, and proper annotation to ensure custom symbols support all rendering modes.

Does this skill support the latest SF Symbols 7 features?

Yes, it includes comprehensive support for SF Symbols 7 features, specifically the new Draw On and Draw Off animations available in later OS versions.

How does it handle accessibility features like Reduce Motion?

The skill includes best practices for handling accessibility, providing patterns that ensure symbol animations respect user system settings like Reduce Motion.

SF Symbols Animations & Effects

Name: SF Symbols Animations & Effects
Author: CharlesWiltgen

byCharlesWiltgen

•

506

•

Mobile Development

Implements and troubleshoots SF Symbols rendering modes, animations, and advanced draw effects for modern Apple platform development.

This skill provides specialized guidance for working with Apple's SF Symbols system across iOS, iPadOS, watchOS, and tvOS. It covers selecting the optimal rendering modes (Hierarchical, Palette, Multicolor), implementing discrete and indefinite symbol effects, and utilizing advanced features like the SF Symbols 7 Draw animations. Whether you're building interactive button states, complex loading indicators, or custom iconography, this skill ensures proper API usage, accessibility compliance with Reduce Motion settings, and backward compatibility across different OS versions from iOS 17 through iOS 26.

주요 기능

01Implementation of discrete effects including Bounce, Wiggle, and Rotate

02506 GitHub stars

03Indefinite animation patterns for Pulse, Breathe, and Variable Color

04Advanced SF Symbols 7 'Draw On/Off' animations for the latest platform releases

05Optimized rendering mode selection for Monochrome, Hierarchical, Palette, and Multicolor

06Custom symbol authoring workflows and troubleshooting for multi-layer icons

사용 사례

01Adding interactive springy animations to UI buttons and feedback elements

02Creating sophisticated loading and progress indicators using Variable Color and Pulse

03Designing custom symbols that support multi-layer rendering and drawing animations

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add charleswiltgen/axiom axiom-sf-symbols

For use in Claude.ai and ChatGPT

Download Skill