Sveegy

Beautiful open-source icon sets usable with just few clicks, even offline.

HTML
VUE
SVELTE
Browse

Use with just few clicks

The easiest way to use sveegy icons is without any package. Browse through icons, pick the one you want, copy the html or jsx and paste it in your code.

Pick an icon

Add assets

Align center

Align left

Align center

html

    <body>
  <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none">
    <path d="M4.5 6H19.5M4.5 10H14.5M4.5 14H16.5M4.5 18H12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
</body>
VUE
SVELTE

Support for multiple frameworks

Sveegy icons are also usable as component library. Just install the npm-package and import the icon like any other component. Sveegy currently supports Svelte and Vue but more is to come.

See more in docs

svelte

    <script>
  import { SvHeartStroke } from '@sveegy/icons-svelte'
</script>

<button class="like-button">
  Like
  <SvHeartStroke size="40px" />
</button>

vue

    <script setup>
import { SvHeartStroke } from '@sveegy/icons-vue'
</script>

<template>
  <button>
    Like
    <sv-heart-stroke size="40px" />
  </button>
</template>

Svg sprites

Using sveegy icons via sprites does not require any javascript. Download the sprites file, place it in the public directory of your project and reference the icon in the html.

Download sprites See more in docs

Index.html

    <body>
  <svg>
    <use xlink:href="stroke.svg#sv-heart-stroke" />
  </svg>
</body>