Icon API
Use this API to get local icons (like file, folder, and application icons) from the macOS device.
The icon API is accessed through the fig://
URL scheme.
File Icons
Using Paths
To retrieve the native macOS icon for a path, simply append the path to the file or folder.
fig:///Users/mschrage/Desktop
Fig will expand a leading ~
to the user's $HOME
directory. So fig://~/Desktop
is valid and will result an icon equivalent to the URL above.
Note: if the specified filepath does not exist on the user's local machine, Fig will fallback to displaying an icon based on the file extension. For instance,
fig://~/this-file-does-not-exist.txt
will display the default.txt
file icon.
Using File Extensions
You can also request the icon for a file type directly using the following syntax:
fig://icon?type=txt
fig://icon?type=png
To get the generic folder icon, pass in folder
as the type
.
fig://icon?type=folder
Standard Icons
Fig also bundles a library of icons that can be access through the fig://
URL scheme.
fig://icon?type=NAME
The full list as of v1.0.40 is included below:
alert
android
apple
asterisk
aws
azure
box
carrot
characters
command
commandkey
commit
database
docker
firebase
gcloud
git
github
gitlab
gradle
heroku
invite
kubernetes
netlify
node
npm
option
package
slack
string
twitter
vercel
yarn
If we are missing an icon, please open an issue.
Adding Badges to Icons
You can also add badges to icons. Badges are used to provide additional information or to highlight a specific suggestion. For instance, the git
completion spec uses badges to indicate whether files have been renamed, modified or deleted when staging.
You can add a badge to an icon by including color
or badge
(or both) as query parameters.
color
(optional) must be a 6 character hex color. If not specified, it defaults to red (#ff0000).
Do not include a leading hashtag as the browser will interpret anything following as a URL fragment.
badge
(optional) is a unicode string. (You can even use emojis! 🎉)
fig:///Users/mschrage/Desktop/hello-world.txt?color=2ecc71&badge=✓
fig://icon?type=txt&=2ecc71&badge=✓
Both of these URLs resolve to this image:
Template
Fig also allows you to generate standalone icons using the same query parameters you use to add badges.
color
describes the background color of the icon. If not specified, it defaults to white (#ffffff).
badge
(optional) is a unicode string.
For example,
fig://template?color=2ecc71&badge=✓
will resolve to this image: