IconsDocsPricing Get all icons
Documentation

Ship an icon in 60 seconds.

One install, the same names across React, Vue, SVG and the webfont. Everything inherits currentColor and respects the weight and corner you pick.

Install

Add the package with your favourite manager. It ships ESM, is fully typed, and has zero runtime dependencies.

terminal
# npm
npm i stroke-icons

# pnpm
pnpm add stroke-icons

# yarn
yarn add stroke-icons

React

Import only the icons you use — the package is tree-shakeable, so your bundle stays tiny. Every icon accepts size, weight, corner and color.

Toolbar.tsx
import { Rocket, Heart, Compass } from 'stroke-icons/react'

export default function Toolbar() {
  return (
    <div className="toolbar">
      <Rocket size={24} weight={1.75} />
      <Heart size={24} color="#FF7A6B" />
      <Compass corner="sharp" />
    </div>
  )
}

Vue

The Vue 3 build mirrors the React API exactly, with the same names and props.

Toolbar.vue
<script setup>
import { Rocket, Heart } from 'stroke-icons/vue'
</script>

<template>
  <Rocket :size="24" :weight="1.75" />
  <Heart color="currentColor" />
</template>

Raw SVG

Prefer no dependency at all? Copy the SVG straight from the library. What you copy is byte-for-byte what the packages output at the same settings.

rocket.svg
<svg viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="1.75"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M14.5 4.5C18 5 19 9 18.5 12.5..." />
</svg>

Webfont

For legacy stacks or email-safe markup, import the font once and reference icons by class name.

styles.css
/* import once */
@import 'stroke-icons/font.css';

<!-- then use anywhere -->
<i class="si si-rocket"></i>
<i class="si si-heart" style="font-size:24px;color:#38E0D6"></i>

Props

Every component icon supports the same four props.

PropTypeDefaultDescription
sizenumber | string24Width and height in pixels.
weightnumber1.75Stroke width, from 1.0 (hairline) to 2.5 (bold).
corner'round' | 'sharp''round'Sets stroke linecap and linejoin.
colorstring'currentColor'Any CSS color; inherits text color by default.

Theming

Because every icon defaults to currentColor, theming is just CSS — set the text color on a parent and the icons follow. Dark mode needs no extra work.

theme.css
/* icons inherit text color via currentColor */
.toolbar { color: var(--text); }

/* dark mode just works */
@media (prefers-color-scheme: dark) {
  :root { --text: #F2EFE9; }
}

Changelog

A new release ships most weeks. Pro and Team licenses include every future update.

VersionDateNotes
v1.4.0June 2026Added 24 nature icons and a sharp-corner variant across the whole set.
v1.3.0May 2026New Vue 3 package, typed props, and an icon webfont build.
v1.2.0April 2026Variable stroke weight (1.0–2.5) shipped to React and SVG exports.
v1.1.0March 2026Figma library published with names matched to the code packages.
v1.0.0February 2026First public release — 400 core icons on a 24px grid.

Ready to drop these into your project?

Get all icons Browse the library ↗
Copied