Getting started
Introduction
What Softstroke is, what ships in v1, and where to start.
Softstroke is a set of 367 soft, rounded icons for web and mobile interfaces. Every icon comes in two styles that share one name: stroke for resting states and solid for active ones. The set is MIT licensed, free for personal and commercial work.
What's in the box
- 367 icons drawn on a 24px grid with a 1.5px stroke, round caps and joins, and squircle corners.
- A solid twin for every icon, built from the stroke icon's own outline.
- Native packages for React, React Native, Flutter, Vue, Svelte and Angular.
- Plain SVG files, sprites and JSON for everything else, served from a CDN.
- An icon font for pages that can't run a build step.
Packages
| Package | Use it for |
|---|---|
@softstroke/react |
React, Next.js, Vite, Remix |
@softstroke/react-native |
React Native and Expo |
softstroke (pub.dev) |
Flutter: iOS, Android, web, desktop |
@softstroke/vue |
Vue 3 and Nuxt |
@softstroke/svelte |
Svelte 5 and SvelteKit |
@softstroke/angular |
Angular 17 and newer |
@softstroke/svg |
Plain HTML, sprites, the CDN, design tools |
@softstroke/font |
One CSS link, no build step |
Where to start
Pick your framework in the sidebar, or go to Installation for a quick start. To find an icon, search the icon browser: every icon has keywords, so "money" finds wallet, coins and banknote.