Sweet-sfsymbols NPM

Sweet SF Symbols

SF Symbols are a set of over 5,000 consistent, highly configurable symbols you can use in your app. SF Symbols are designed to integrate seamlessly with the San Francisco system font, so the symbols automatically ensure optical vertical alignment with text for all weights and sizes.

Highlights

:fire: Built with Expo's Module API
:art: Rendering modes
:art: Variable color values
:no_bell: Symbol Variants
:tada: Symbol Effects
:apple: iOS only (see why)

Installation

Sweet SFSymbols requires Expo SDK 46+ and Xcode 15+.

Expo

Install the library:

npx expo install sweet-sfsymbols

Then rebuild your app:

# Using EAS? run a build in the cloud!
eas build --platform ios

# Otherwise, prebuild and run a local build
npx expo prebuild -p ios --clean
npx expo run:ios

NOTE: This library will not work with Expo Go. Use a development build instead!

Usage

See the example app.

`<SFSymbol />`

The SFSymbol component uses SwiftUI's Image view to render SF Symbols.

`Props`

`name`

The name of the symbol.

required: yes
type: SystemName
default: ""

`colors`

The colors of the symbol. For monochrome and hierarchical rendering modes, this is a single color. For palette rendering mode, this is an array of colors. For multicolor rendering mode, this is ignored and system default values are used. This supports hex, hsl(a), rgb(a), web standard color names, PlatformColor and DynamicColorIOS values.

required: no
type: (string | OpaqueColorValue)[]
default: []

`weight`

The weight of the symbol.

required: no
type: "thin" | "ultraLight" | "light" | "regular" | "medium" | "semibold" | "bold" | "heavy" | "black"
default: "regular"

`scale`

The scale of the symbol.

required: no
type: "small" | "medium" | "large"
default: "medium"

`renderingMode` (iOS 15+)

The rendering mode of the symbol. Learn more about rendering modes here.

required: no
type: "monochrome" | "hierarchical" | "palette" | "multicolor"
default: "monochrome"

`size`

The size of the symbol. This deifines the frame of the image view.

required: no
type: number
default: 50

`variableValue` (iOS 16+)

The variable value of the symbol. Only some symbols support variable values, ususally those that represent a change in value (like speaker.wave.3) The variable value determines what percentage of the symbol is filled in. Learn more about variable values here.

required: no
type: number
default: 1.0

`variant` (iOS 15+)

The variant of the symbol. This is an alternate way to modify the symbol's appearance without modifying the symbol name. Learn more about symbol variants here.

required: no
type: SymbolVariant
default: none

`symbolEffect` (iOS 17+)

The symbol effect of the symbol. Adds an animation to the symbol. Learn more about symbol effects here.

required: no
type: SymbolEffect
default: undefined

`style`

The style of the symbol.

required: no
type: ViewStyle
default: undefined

Disclaimer

It's your responsibility to check Apple's rules about when and where certain icons can be used. You can check the Human Interface Guidelines and use the official SF Symbols app to check for any restrictions on the icons you want to use.

This library isn't associated with Apple, and only exposes a way to use them within React Native apps on iOS.