Using Softicons

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

React

npm i @softicons/react

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

<ArrowRightIcon />
<HeartIcon size={20} strokeWidth={1.5} color="#e06a8b" aria-label="Like" />

Vue

npm i @softicons/vue

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

<template>
  <ArrowRightIcon :size="20" :stroke-width="1.5" />
</template>

Angular

npm i @softicons/angular

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

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

HTML / CDN

Drop in any icon by its R2 URL — no build step, no JavaScript.

<img src="https://cdn.softicons.dev/v1/icons/arrows/arrow-right.svg"
     width="24" height="24" alt="arrow right icon">

Web font

For plain pages you can also use the icon font — color is color, size is font-size.

<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>

Raw SVG

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