Portrait of Marc Bouchenoire Symbolistv5.1.0

Symbolist

A collection of every symbol from SF Symbols.

  • ๐Ÿค– Automated: Authored and updated automatically
  • ๐Ÿงช Reliable: Fully tested with 100% code coverage
  • ๐Ÿ“ฆ Typed: Written in TypeScript and includes definitions out-of-the-box
  • ๐Ÿ’จ Zero dependencies
View on GitHub
Seeing missing characters?

SF Symbols require San Fransiscoโ€”the system font on Apple platformsโ€”installed to be visible. Additionally, youโ€™ll also need SF Pro installed when using Chromium-based browsers or Firefox.

/
๔€€ธ
0.circle
๔€€น
0.circle.fill
๔€ƒˆ
0.square
๔€ƒ‰
0.square.fill
๔€“ซ
00.circle
๔€”Š
00.circle.fill
๔€”ฉ
00.square
๔€•ˆ
00.square.fill
๔€“ฌ
01.circle
๔€”‹
01.circle.fill
๔€”ช
01.square
๔€•‰
01.square.fill
๔€“ญ
02.circle
๔€”Œ
02.circle.fill
๔€”ซ
02.square
๔€•Š
02.square.fill
๔€“ฎ
03.circle
๔€”
03.circle.fill
๔€”ฌ
03.square
๔€•‹
03.square.fill
๔€“ฏ
04.circle
๔€”Ž
04.circle.fill
๔€”ญ
04.square
๔€•Œ
04.square.fill
๔€“ฐ
05.circle
๔€”
05.circle.fill
๔€”ฎ
05.square
๔€•
05.square.fill
๔€“ฑ
06.circle
๔€”
06.circle.fill
๔€”ฏ
06.square
๔€•Ž
06.square.fill
๔€“ฒ
07.circle
๔€”‘
07.circle.fill
๔€”ฐ
07.square
๔€•
07.square.fill
๔€“ณ
08.circle
๔€”’
08.circle.fill
๔€”ฑ
08.square
๔€•
08.square.fill
๔€“ด
09.circle
๔€”“
09.circle.fill

Introduction

SF Symbols is a library of iconography from Apple, integrated into the San Francisco system fonts.

Installation

npm install symbolist

Usage

symbols

Import symbols.

import { symbols } from "symbolist"

// symbols: {"0.circle": "๔€€ธ", "0.circle.fill": "๔€€น", ...}

getSymbol

Import getSymbol.

import { getSymbol } from "symbolist"

Given a symbol name, getSymbol will return its symbol (or undefined for unknown symbols).

const symbol = getSymbol("scribble.variable")

// symbol: "๔€ค‘"

getSymbolName

Import getSymbolName.

import { getSymbolName } from "symbolist"

Given a symbol, getSymbolName will return its name (or undefined for unknown symbols).

const name = getSymbolName("๔€ฃณ")

// name: "lasso.and.sparkles"

Automation

Symbols are extracted with the generate commandโ€”using the SF Symbols app.

Types

generate prepares types along its symbols which means getSymbol and getSymbolName will validate symbol names when using TypeScript.

Versioning

This package follows SF Symbols' versioning for major and minor versions.