Use Alma SVG icons in Vue

Install the package

npm install alma-icons

For a fixed interface, import the icon components you use. This keeps icon selection explicit and works with server rendering.

Render a static icon

<script setup lang="ts">
import { SearchOutline400 } from "alma-icons/vue/icons";
</script>

<template>
  <button type="button" aria-label="Search">
    <SearchOutline400 aria-hidden="true" :width="24" :height="24" />
  </button>
</template>

The component name identifies the icon, style and weight. This example uses Search, outline, weight 400. Check the package documentation for the exports available in your installed version.

Use a downloaded SVG

You can also download a variant from an icon page, save it as public/icons/search.svg, and reference it directly:

<img src="/icons/search.svg" width="24" height="24" alt="Search">

Use an empty alt when the icon repeats nearby text. For a button with no visible text, put the accessible name on the button and hide the decorative icon from assistive technology.

Explore the icons

Browse icon categories or open the interactive catalog.

By Misha Grebennikov. Licensed under CC BY-NC 4.0: attribution required, non-commercial use only. License details.

See the package documentation for more integration options.