ios-symbols v1.1.0

ios-symbols

🔣 ️A collection of every symbol from SF Symbols.

🔗 Explore and preview symbols in the playground.

Introduction

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

Installation

Skypack

<script type="module">
  import { symbols } from "https://cdn.skypack.dev/ios-symbols"
</script>

Yarn

yarn add ios-symbols

npm

npm install ios-symbols

Usage

symbols

Import symbols.

import { symbols } from "ios-symbols"

// symbols: {"0.circle": "􀀸", "0.circle.fill": "􀀹", ...}

getSymbol

Import getSymbol.

import { getSymbol } from "ios-symbols"

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 "ios-symbols"

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

const name = getSymbolName("􀣳")

// name: "lasso.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.

Related

📏 ios-dimensions: A collection of dimensions from iOS.