[TIL] SF Symbols

SF Symbols

---

• Apple이 제공하는 공식 아이콘 라이브러리
• iOS, macOS, watchOS, iPadOS 앱에서 일관된 스타일의 아이콘을 쉽게 사용할 수 있게 해주는 기능
• 수천 개의 아이콘이 system name 형태로 제공

// ❤️
UIImage(systemName: "heart.fill")
Image(systemName: "heart.fill")  // SwiftUI

특징

• 동적 크기와 굵기 지원: 텍스트 크기에 맞춰 자동 조절됨 (Dynamic Type)
• 벡터 기반: 해상도 무제한 확대 가능
• 애플 디자인 가이드라인 반영: iOS 시스템 UI와 일관된 스타일
• 컬러, 크기, 두께 커스터마이징 가능: 원하는 스타일로 변형 가능
• 카테고리별로 수천 개 제공: arrow, person, folder, doc, play 등

사용 방법

1. SF Symbols 앱 다운로드

https://developer.apple.com/sf-symbols/

• 아이콘 카테고리 분류 제공
• 다크모드/라이트모드 미리보기
• 지원 플랫폼(iOS 13+, 14+, 15+) 표시
• 렌더링 스타일(Palette, Hierarchical 등) 확인 가능

• 사용법
  • 앱을 실행하면 수천 개의 아이콘이 나옴.
  • 검색창에 키워드 입력 (예: star, arrow, person)
  • 클릭하면 이름 복사 가능
  • 아이콘 이름을 복사해서 systemName:에 그대로 사용

2-1. UIKit에서의 사용

let imageView = UIImageView()
imageView.image = UIImage(systemName: "star.fill")
imageView.tintColor = .systemYellow
imageView.contentMode = .scaleAspectFit

• UIImage(systemName:)으로 SF Symbol을 가져와 사용
• 크기, 색상 등은 일반 이미지와 동일하게 설정 가능
• tintColor를 설정하지 않으면 기본은 gray

2-2. SwiftUI에서의 사용

Image(systemName: "star.fill")
    .font(.system(size: 40))          // 크기
    .foregroundColor(.yellow)         // 색상

• font로 크기 조정 (SF Symbol은 텍스트처럼 취급)

💡 주의사항

• 시스템 아이콘이기 때문에 Apple Human Interface Guideline을 지켜야 함.
• iOS 버전별로 지원하는 아이콘이 다르므로 사용 중인 iOS 버전에 해당 아이콘이 있는지 확인 필요
• SF Symbol 이름이 틀리면 아이콘이 안 보이거나 앱이 크래시남.