icon classes like Font Awesome
Icon classes, the Font Awesome way
Add one small loader script, then write <i class="with with-home"></ anywhere in your HTML: that’s the same pattern Font Awesome made popular, and the page downloads only the icons it shows. Prefer no JavaScript? Link one stylesheet per style instead. Add a style class such as with-solid or with-sketch for the other 19 styles, and modifiers like with-2x, with-spin or with-flip-h. Click an icon below to copy its tag.
Pick an icon, copy the code
A starter set for Icon classes (<i> tags). Search to find any of all 500.
Click an icon to copy its <i> tag. The arrow opens its page.
No icons match yet. Try a simpler word, or browse all 500.
Set up
One setup line, then plain tags
Each icon is a CSS mask over currentColor, sized 1em, so it scales with font size and takes the text colour. The loader (about 6 KB gzipped) links just the CSS of the icons on the page, in any mix of styles: a line icon is about 270 bytes gzipped. No JavaScript? Link one stylesheet per style; with-line.css holds all 500 line icons in about 26 KB gzipped. The link below is served by jsDelivr; to host it yourself, npm i @withicons/ or download with-line.css.
| Base class | with plus with-<name> |
|---|---|
| Styles | with-solid, with-duo, with-gloss, with-engrave, with-blueprint, with-sketch and more (the loader fetches each one; without it, link that style’s CSS) |
| Sizes | with-xs, with-sm, with-lg, with-2x … with-5x, with-fw |
| Motion & flips | with-spin, with-pulse, with-rotate-90, with-flip-h, with-flip-v |
| Aliases | With the optional runtime, alias names work too: with-bin → trash |
<script src="https://cdn.jsdelivr.net/npm/@withicons/classes/dist/with-loader.js" defer></script>
<i class="with with-home"></i>
<i class="with with-home with-solid"></i>
<i class="with with-settings with-2x with-spin"></i>
<button><i class="with with-trash" aria-hidden="true"></i> Delete</button>Coming from Font Awesome? See the class-name map and converter.
FAQ
Questions people ask
Do I need JavaScript for the icon classes?
No. The small loader script is the lightest setup (it fetches only the icons on the page), but a stylesheet per style renders every icon of that style with no JavaScript at all. An optional runtime script adds live CSS colour variables and alias names.
How do I make an icon bigger?
Icons are 1em, so they follow font-size. Use with-lg or with-2x to with-5x, or set font-size yourself.
Is this compatible with Font Awesome class names?
The pattern is the same but the names differ (fa-house → with-home). The Font Awesome page has a name map and a converter.
How do I make an icon accessible?
Decorative icons next to text: add aria-hidden="true". Icon-only buttons: put aria-label on the button.
Find your icon in seconds
500 free icons, 20 styles, no account. Copy, download or drag them into your work.
Browse all icons