Docs

Browse 9,184 SF Symbols on the web, or insert them straight into Figma and Framer with the plugins.

Using the website

Search & filter

Search by name or keyword, filter by category, and switch between All / Outline / Filled.

Recolor

Pick a color in the header — it applies to the grid, the preview and the copied SVG.

Copy as SVG or text

Click a symbol to copy a clean SVG, copy the SF Symbols character, copy its name, or download an .svg.

Any browser

Icons render from real vector outlines, so nothing here needs the SF font installed.

Install the Figma plugin

The plugin inserts symbols as a live SF font glyph or as a vector SVG, and can replace a selected layer in place. It runs as a local development plugin:

On a Mac with the SF fonts installed (download from Apple if needed), get the project: git clone https://github.com/rakibulism/SF-Symbols.git (or download the ZIP from GitHub).
Open Figma desktop → Plugins → Development → Import plugin from manifest…
Choose manifest.json in the project folder.
Run it any time from Plugins → Development → SF Symbols.

The Framer plugin Coming soon

A Framer version is on the way — it inserts any of the 9,184 symbols onto the canvas as a clean, recolorable SVG (Flatten or Outline), and can replace a selected layer in place. It’ll be installable from Framer once published.

Using the plugin

Insert as Text — a live SF font glyph (recolorable like text) at the weight and family you choose.
Insert as SVG — a real vector in a square frame; choose Flatten (filled) or Outline stroke (line).
Replace selection — with it on, clicking a symbol swaps the selected layer in place, keeping its color, size and position. Select multiple layers to replace them all at once (large layout frames are left untouched).
Smart search — best name matches rank first; searching square shows square at the top.
Size — Auto matches the replaced layer; pick a number (10–96) to force a size.

Browse symbols