Use Alma SVG icons in React

Install the package

npm install alma-icons

Import the icon you need

import { SearchOutline400 } from "alma-icons/react/icons";

export function SearchButton() {
  return (
    <button type="button" aria-label="Search">
      <SearchOutline400 width={24} height={24} aria-hidden="true" />
    </button>
  );
}

Static imports work well when the icons in an interface are known in advance. Choose the style and weight in the component name, and check the exports for your installed package version.

Keep layout stable

Set explicit width and height so the icon reserves its space. Keep the label on the interactive element; a decorative SVG does not need a second accessible name.

Without a component library

Download a variant from the catalog, save it in your public assets directory, then render a regular image:

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

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.