SF Symbols SVG Library

SF Symbols is the greatest icon set to ever be created, and will likely remain so for the foreseeable future. Unfortunately, Apple has always hated the web...

This repo is used to convert SF Symbols to SVGs, which can then be used in web projects.
The SVGs are generated from the SF Symbols font files, and the names are taken from the SF Symbols app.
All 4,491 symbols in 9 weights are included. Monochrome color mode only.

Usage

If first time, install dependencies.

pnpm i

Then, generate the JSON output with SVGs (this will take multiple minutes on an M1 Mac).

pnpm run make

Output can be found in /src

Creating a new version

Place the char and name files into `/sources

Download the latest SF Symbols version from Apple's website.
Go to Edit > Select All
Right click on the selection, and press Copy all {x} symbols
Paste symbols into a file in sources/{version}/chars.txt
Right click again on the selection, this time press Copy all {x} names
Paste names into a file in sources/{version}/names.txt

Place the font files into `/sources`

Download SF Pro font from Apple's website.
Install the font, and open Font Book app.
Find SF Pro, and right click on it. Press Show in Finder.
Copy SF-Pro-Text-Ultralight.otf through SF-Pro-Text-Black.otf file into sources/{version}/ folder.
Thats it, now you can run the script below.

Note on Bounding Boxes

Currently, extra space is trimmed at the 4 outer edges of each symbol. It might be desirable to retain the initial extra spacing to preserve baseline consistency or x-axis overflow. Preserving these properties would make the symbols in this library more similar to the characters in the font.

Note on License

I do not own nor claim to own SF Symbols. This repo is simply a tool to convert the SF Symbols font into SVGs.

g-a-v-i-n/sf-symbols