A lightweight CSS sprite library for displaying iOS shortcut icons in your web projects.

Grab the stylesheet and the default (iOS 26) glyph set, and add a shortcut icon to your HTML with just an empty div element:

<div class="shortcut-icon c4251333119 g59793 s86"></div>

In this example shortcut-icon is the base CSS class. The secondary c4251333119 class is the orange color from iOS 26, the g59793 class is the "paintbrush" glyph and the s86 class is the desired icon size.

See the live demo and its source file for more examples.

The color and glyph numeric values can be found both in the shortcut metadata (see below) and in its plist (the shortcut "source code"). See below for how to get them using a shortcut.

The HTML element doesn't have to be a <div>, although using other elements may require additional CSS to reset their appearance.

If you want to use the colors and glyphs from iOS 12-18, grab the glyph sets you want to use and add an additional ios12, ios13, ios14, ios15, ios16, ios17, or ios18 class to each HTML element.

And if you need a size not in the CSS, it's easy to define your own. For example, to get 58×58 icons:

.s58  { --icon-size:  58px }

To access a shortcut's metadata add api/records/ after shortcuts/ in its iCloud link. Example:

https://www.icloud.com/shortcuts/3c00aa9f2c57462e81f78007efca59d2
↓
https://www.icloud.com/shortcuts/api/records/3c00aa9f2c57462e81f78007efca59d2

This shortcut shows how to get the image, the color code and the glyph code of a shortcut icon. It does it with itself, but it would be easy to modify it to let the user pick another shortcut from their library.

Get Shortcut Icon Info https://www.icloud.com/shortcuts/3c00aa9f2c57462e81f78007efca59d2

• RoutineHub
• Cherri's Shortcuts Glyph Search
• Live demo in my site
• Shortcut repository from @shortcuts_es

As the LICENSE explains, I don't claim authorship of the glyphs. Those are Apple's and I'm using them to show what can be seen in publicly published iCloud links. The limited resolution of the assets is intentional.

Thanks to @ActuallyTaylor for her help in getting the hi-res versions of the glyphs for the first versions. Without her I don't think I'd have the patience to do this.

Thanks also to the members of r/Shortcuts' and RoutineHub's Discords for their feedback.