Every icon, one CSS link.
All 367 icons in stroke and solid as a web font. For pages where a build step is more than you need.
https://cdn.jsdelivr.net/npm/@softstroke/font@1/dist/softstroke.cssWrite a class, get an icon.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@softstroke/font@1/dist/softstroke.css" />
<nav class="tabs">
<a class="active"><i class="ss-solid ss-home"></i> Home</a>
<a><i class="ss ss-search"></i> Search</a>
<a><i class="ss ss-bell"></i> Inbox</a>
<a><i class="ss ss-user"></i> Profile</a>
</nav>
<button><i class="ss ss-download"></i> Download</button>Rendered live with the font.
Why the font.
- One line to installAdd the stylesheet and every icon is a class away.
- Styled with CSSfont-size and color work like they do on text.
- Stroke and solidSwap ss for ss-solid to mark the active state.
- About 48 KB per styleWOFF2, cached by the browser after the first load.
- Works anywhere HTML doesPlain pages, WordPress, Webflow, prototypes.
- Same shapes as the SVGsBuilt from the same outlines and checked against them.
Need custom stroke widths or only a few icons? A framework package ships just the icons you import, with strokeWidth as a prop.
See packagesQuestions.
A font where each character is an icon. You load one stylesheet, then write <i class="ss ss-home"></i> and the browser draws the icon as text, so it follows font-size and color.
Yes. The font and every icon in it are MIT licensed, free for personal and commercial work, with no account or key.
Use the ss-solid class instead of ss: <i class="ss-solid ss-home"></i>. Both styles have every icon under the same name.
No. A font glyph is a filled shape, so each stroke icon is its 1.5px outline. If you need other weights, use a framework package or the SVG files, where strokeWidth is a prop.
Every current browser. The font ships as WOFF2 only, which all of them support.
Add aria-hidden="true" to decorative icons, and put an aria-label on the button or link when an icon is its only content. The docs have examples.