Portrait of Marc Bouchenoire Symbolistv1.3.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

Skypack

import { symbols } from "https://cdn.skypack.dev/symbolist"

Yarn

yarn add symbolist

npm

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.