How to use the icons
Shaped Icons work on any website: WordPress, a page builder or plain HTML. You add one stylesheet, then write an icon tag wherever you want an icon. There are no fonts or scripts to load.
1Add the stylesheet
Paste this line into the <head> of your page or theme, once per page.
<link rel="stylesheet" href="http://localhost:3000/v1/all.min.css">all.min.css holds every icon. If you use only one style, load its file instead to keep your page light:
| Icons | File | Size |
|---|---|---|
| Every style | all.min.css | 457 KB |
| Solid (472) | solid.min.css | 294 KB |
| Regular (109) | regular.min.css | 87 KB |
| Brands (85) | brands.min.css | 78 KB |
Sizes are before compression. Browsers download much less, and keep the file in their cache.
2Add an icon
Write an <i> tag with the class sp and the class of the icon, sp-{style}-{name}. Put it anywhere in your text, buttons or menus.
<i class="sp sp-solid-house" aria-hidden="true"></i> HomeResult
Home. The icon sits in the text like a letter.
Used to Font Awesome? It works the same way: one stylesheet, then an <i> tag with classes, sized by the text and colored with color. Only the class names differ. Write sp sp-solid-house where Font Awesome uses fa-solid fa-house, and sp-2xl, sp-spin or sp-fw in place of their fa- versions.
3Find the icon you need
Search all icons by name or meaning. Each icon's page shows its class, lets you set the size, color and rotation, and copies the tag for you. Press Ctrl K or ⌘ K on any page to search.
Size and color
Icons take the size and color of the text around them. Change them with CSS (font-size and color) or with a size class:
<i class="sp sp-solid-envelope sp-2xl" aria-hidden="true"></i>
<i class="sp sp-solid-envelope" style="color: #2f4bff; font-size: 24px" aria-hidden="true"></i>All size classes: sp-2xs, sp-xs, sp-sm, sp-lg, sp-xl, sp-2xl, and sp-1x up to sp-10x.
More options
Add these classes next to the icon class:
| sp-fw | Same width for every icon, to line up icons in lists and menus. | |
| sp-rotate-90 | Rotate by 90 degrees. Also sp-rotate-180 and sp-rotate-270. | |
| sp-flip-horizontal | Mirror. Also sp-flip-vertical and sp-flip-both. | |
| sp-spin | Spin. Stops for visitors who prefer reduced motion. | |
| sp-pulse | Spin in 8 steps, for loading indicators. |
Use one rotate or flip class at a time, since they set the same property.
Accessibility
Next to text, hide the icon from screen readers so the text is read once:
<a href="/contact"><i class="sp sp-solid-envelope" aria-hidden="true"></i> Contact us</a>When the icon is the only content of a link or button, give the link or button a name:
<a href="/" aria-label="Home"><i class="sp sp-solid-house" aria-hidden="true"></i></a>Icons follow high-contrast modes and print with the page.
Getting new icons
The link above loads version 1. It never changes, so your icons always look the same and load fast from the cache. When new icons are published, this page shows the new link: replace the old one on your website to get them.
Prefer automatic updates? Use this link instead. Removed or renamed icons then disappear from your website too.
<link rel="stylesheet" href="http://localhost:3000/latest/all.min.css">New and changed icons can take up to an hour to reach the latest link.
License
Icons based on Font Awesome Free 6.7.2 by Fonticons, Inc., licensed under CC BY 4.0. Brand icons are trademarks of their owners. Keep the comment at the top of the stylesheet if you copy it. Read the CC BY 4.0 license.