Icons
Sitka supports three icon libraries across platforms — SF Symbols for native Apple apps, Phosphor Icons for web and React, and Font Awesome for broad compatibility.
| Library | Platform | Style | Free tier |
|---|---|---|---|
| SF Symbols | iOS · macOS · watchOS · tvOS | 9 weights · 4 rendering modes | 6,000+ symbols |
| Phosphor Icons | Web · React · Vue · Svelte | 6 weights (thin → duotone) | 1,248 icons |
| Font Awesome | Web · React | Solid · Regular · Brands | ~2,000 solid icons |
Phosphor Icons
A flexible icon family with six weight variants that share the same underlying geometry. Use a consistent weight across a surface — mixing weights should be intentional.
Weight variants
thinlightregularboldfillduotoneCommon icons (regular)
Installation
npm install @phosphor-icons/reactUsage
import { House, Bell, Heart } from "@phosphor-icons/react";
// Default weight (regular)
<House size={24} />
// Explicit weight
<Bell size={24} weight="bold" />
<Heart size={24} weight="fill" />
// With colour token
<House size={24} weight="duotone" color="rgb(var(--accent))" />SF Symbols
Apple's native icon system is built into iOS, macOS, watchOS, and tvOS — no import needed. Symbols adapt to Dynamic Type, support nine weights, and four rendering modes including full multicolour.
Weights
.ultraLightFont.Weight.thinFont.Weight.lightFont.Weight.regularFont.Weight.mediumFont.Weight.semiboldFont.Weight.boldFont.Weight.heavyFont.Weight.blackFont.WeightRendering modes
.monochromeSingle colour — matches foreground tint
.hierarchicalDepth layers in one colour
.paletteTwo or more explicit colours
.multicolorApple-defined full-colour rendering
Usage (SwiftUI)
import SwiftUI
struct IconExamples: View {
var body: some View {
VStack(spacing: 20) {
// Basic usage — name matches SF Symbols app
Image(systemName: "house.fill")
.font(.system(size: 24))
// Weight override
Image(systemName: "bell")
.font(.system(size: 24, weight: .bold))
// Hierarchical rendering (depth layers in one colour)
Image(systemName: "star.fill")
.symbolRenderingMode(.hierarchical)
.foregroundStyle(.blue)
// Palette rendering (explicit multi-colour)
Image(systemName: "person.crop.circle.badge.checkmark")
.symbolRenderingMode(.palette)
.foregroundStyle(.green, .secondary)
// Multicolor (Apple-defined colours)
Image(systemName: "flame.fill")
.symbolRenderingMode(.multicolor)
// Scaled with Dynamic Type
Image(systemName: "envelope")
.imageScale(.large)
.font(.title2)
}
}
}Browse the full symbol catalogue in the SF Symbols app — available free from developer.apple.com.
Font Awesome
Font Awesome's free tier includes ~2,000 solid icons and a limited set of regular and brand icons. Use it where FA-specific icon names are already part of your design language or you need broad browser compatibility.
Solid vs Regular (free)
Solid icon set (sample)
Installation
npm install @fortawesome/react-fontawesome \
@fortawesome/fontawesome-svg-core \
@fortawesome/free-solid-svg-icons \
@fortawesome/free-regular-svg-iconsUsage
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHouse, faBell } from "@fortawesome/free-solid-svg-icons";
import { faHeart } from "@fortawesome/free-regular-svg-icons";
// Solid icon
<FontAwesomeIcon icon={faHouse} />
// With size
<FontAwesomeIcon icon={faBell} size="lg" />
// With pixel size via style
<FontAwesomeIcon icon={faHouse} style={{ width: 24, height: 24 }} />
// Regular variant
<FontAwesomeIcon icon={faHeart} />