Documentation

Using Softicons

Every icon is a plain, dependency-free SVG drawn on a 24×24 grid with currentColor strokes. Use the package for your framework, the CDN for plain pages, or just copy the markup. Same icons, every stack.

Step one

Install

Pick the package for your framework — each ships tree-shakeable icon components.

# React
npm i @softicons/react

# Vue
npm i @softicons/vue

# Angular
npm i @softicons/angular

# Web font (for plain HTML)
npm i softicons

No build step? Skip ahead to the section.

Plain pages

HTML / CDN

No bundler needed. Use the icon font, or drop in any icon by its CDN URL as a plain <img>.

<!-- icon font -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/softicons@latest/dist/softicons.min.css">

<i class="si si-arrow-right"></i>
<i class="si si-heart" style="color:#e06a8b; font-size:32px"></i>

<!-- …or just an <img> from the CDN -->
<img src="https://cdn.softicons.dev/v1/icons/arrows/arrow-right.svg"
     width="24" height="24" alt="arrow right icon">

Components

React

Import any icon as a component. Names are PascalCase with an Icon suffix (arrow-right → ArrowRightIcon). All SVG props pass straight through.

import { ArrowRightIcon, HeartIcon, BellIcon } from "@softicons/react";

export default function Toolbar() {
  return (
    <div>
      <ArrowRightIcon />
      <HeartIcon size={20} strokeWidth={1.5} color="#e06a8b" />
      <BellIcon className="nav-icon" aria-label="Alerts" />
    </div>
  );
}

Components

Vue

Works the same in Vue 3 (and Nuxt 3/4) — import and place. Props are kebab-cased.

<script setup>
import { ArrowRightIcon, HeartIcon } from "@softicons/vue";
</script>

<template>
  <ArrowRightIcon />
  <HeartIcon :size="20" :stroke-width="1.5" color="#e06a8b" />
</template>

Components

Angular

Standalone components — import the ones you need and use the element selector.

import { ArrowRightIconComponent } from "@softicons/angular";

@Component({
  standalone: true,
  imports: [ArrowRightIconComponent],
  template: `<arrow-right-icon [size]="24" />`,
})
export class DemoComponent {}

Zero deps

Raw SVG

Open any icon, hit Copy → SVG, and paste. The markup uses stroke="currentColor" so it inherits text color.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
     viewBox="0 0 24 24" fill="none" stroke="currentColor"
     stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <line x1="4" y1="12" x2="20" y2="12" />
  <polyline points="13 5 20 12 13 19" />
</svg>

Customise

Styling

Because icons stroke with currentColor, color is just CSS color. Size, weight and color all bend to your tokens.

.icon-btn        { color: var(--text); }
.icon-btn:hover  { color: var(--accent); }

/* scale anywhere */
.si svg { width: 1.25em; height: 1.25em; }

/* thinner, softer line */
.si svg { stroke-width: 1.5; }

Recommended stroke range is 1.5–2.25; the set is drawn to read cleanly at 2.

Do it right

Accessibility

Decorative icons should be hidden from assistive tech; meaningful ones need a label.

<!-- decorative: hide it -->
<ArrowRightIcon aria-hidden="true" focusable="false" />

<!-- meaningful: name it -->
<button aria-label="Delete">
  <TrashIcon aria-hidden="true" />
</button>

That's the whole API.

Go find the icon you need.

Browse icons