axiom-sf-symbols

Guide developers on using Apple's SF Symbols with rendering modes, effects, and animations.

61|3|Updated Feb 14, 2026
One-click install
npx skills add https://github.com/joelhooks/joelclaw --skill axiom-sf-symbols
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: axiom-sf-symbols
Source: https://github.com/joelhooks/joelclaw/tree/main/.agents/skills/axiom-sf-symbols
Command: npx skills add https://github.com/joelhooks/joelclaw --skill axiom-sf-symbols

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers effectively use Apple's SF Symbols by explaining rendering modes, symbol effects, animations, and custom symbol creation, ensuring symbols look and behave as intended across different iOS versions.

Core Features & Use Cases

  • Rendering Modes: Guides selection between Monochrome, Hierarchical, Palette, and Multicolor.
  • Symbol Effects: Details various animations like Bounce, Pulse, Wiggle, Rotate, Breathe, and Draw On/Off.
  • Custom Symbols: Explains how to create and annotate custom symbols for advanced features.
  • Use Case: You need to animate a download button to bounce on tap, then pulse while active, and finally transform into a checkmark. This Skill provides the exact modifiers and logic to achieve this.

Quick Start

Use the axiom-sf-symbols skill to learn how to apply the bounce effect to an SF Symbol.

Frequently Asked Questions about axiom-sf-symbols

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

FAQPage Schema
How do I animate SF Symbols in SwiftUI with bounce and pulse effects?

To animate SF Symbols in SwiftUI, you use specific symbol effect modifiers to apply animations like Bounce, Pulse, Wiggle, Rotate, and Breathe. This allows interactive elements like buttons to react visually to user taps and ongoing states.

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

SF Symbols rendering modes include Monochrome, Hierarchical, Palette, and Multicolor. You choose a mode based on your UI design needs: Monochrome for simple tinting, Hierarchical for depth, Palette for custom color combinations, and Multicolor for built-in symbol colors.

How do I apply the Draw On/Off animation to SF Symbols across iOS versions?

Applying the Draw On/Off animation to SF Symbols requires using the correct SwiftUI modifiers for your target iOS version. This Skill provides implementation details for advanced features like Draw animations, ensuring symbols behave as intended across different iOS releases.

Can I create custom SF Symbols that support animations and accessibility features?

Yes, you can create custom SF Symbols by drawing and annotating them properly. This process enables advanced features like symbol effects and animations while addressing accessibility considerations for users relying on assistive technologies.

What is the best way to transition an SF Symbol from a download icon to a checkmark?

The best way to transition an SF Symbol is by chaining symbol effect modifiers to bounce the icon on tap, pulse while active, and then transform into a checkmark. This provides clear visual feedback for multi-step user interactions.