skills.rest
jpoindexter
jpoindexterCOMMUNITY
Explore all skills by this author →
Website𝕏@microninkGitHub

ios-sf-symbols-and-icons

Guide iOS 26 app icon and SF Symbol design per Apple's Human Interface Guidelines.

1|Updated Jun 9, 2026
Search Tags:#ios#apple#hig#sf-symbols#app-icon#icon-composer
One-click install
npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill ios-sf-symbols-and-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ios-sf-symbols-and-icons
Source: https://github.com/jpoindexter/design-and-ai-skills/tree/main/design-system-skills/ios-sf-symbols-and-icons
Command: npx skills add https://github.com/jpoindexter/design-and-ai-skills --skill ios-sf-symbols-and-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps users make informed decisions about selecting and designing iOS 26 app icons and SF Symbols, ensuring they align with Apple's Human Interface Guidelines and accessibility standards.

Core Features & Use Cases

  • SF Symbols Usage: Guide on weights, scales, rendering modes, fill vs. outline variants, animations, and accessibility labels for SF Symbols.
  • App Icon Design: Instructions on creating layered icons using Icon Composer, following Apple's Human Interface Guidelines.
  • Use Case: For a designer working on an iOS app, this Skill provides the necessary guidelines to select the right icon and design it according to Apple's specifications.

Quick Start

Use the ios-sf-symbols-and-icons skill to get guidelines on designing an app icon for your iOS app that adheres to Apple's Human Interface Guidelines.

Frequently Asked Questions about ios-sf-symbols-and-icons

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

FAQPage Schema
How do I design iOS 26 app icons that meet Apple's Human Interface Guidelines?▼

To design iOS 26 app icons adhering to Apple's Human Interface Guidelines, use Icon Composer to create layered icons and ensure your design aligns with current accessibility standards and specifications.

What are the correct SF Symbol weights and rendering modes for iOS apps?▼

Correct SF Symbol weights and rendering modes depend on your specific UI context, utilizing available weights, scales, and rendering modes like fill or outline variants to match Apple's Human Interface Guidelines.

How do I add accessibility labels to SF Symbols in an iOS application?▼

Add accessibility labels to SF Symbols by following Apple's Human Interface Guidelines and accessibility standards, ensuring that each symbol provides meaningful descriptions for VoiceOver and other assistive technologies.

What is the best way to create layered app icons using Icon Composer?▼

The best way to create layered app icons using Icon Composer is to follow the provided guidelines for layering assets, ensuring the final icon adheres to Apple's Human Interface Guidelines and accessibility standards.

When should I use fill versus outline variants of SF Symbols?▼

Choose between fill and outline variants of SF Symbols based on your interface's visual hierarchy and specific use case, following Apple's Human Interface Guidelines to determine the appropriate rendering mode for accessibility and clarity.

Does this SF Symbols guide cover how to implement symbol animations?▼

Yes, this SF Symbols guide covers how to implement symbol animations, providing instructions on using various animation behaviors alongside weights, scales, and rendering modes according to Apple's Human Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
EmasoftEmasoft
1

app-icons

Creates and validates Apple platform app launcher icons and UI glyphs.

Community
Advanced
moasqmoasq
32

asset-management

Manage Xcode project assets, app icons, and asset catalogs.

Community
Intermediate
sachio222sachio222

ios-hig-design

Apply Apple's Human Interface Guidelines to iOS UI design reviews.

Community
Advanced
MHD-Nour-KJMHD-Nour-KJ

Dynamic Launcher Icon Change in Flutter

Configure dynamic launcher icon switching for Flutter apps on iOS and Android.

Community
Advanced