AlmaIcons — Modern Multi-Weight Icon Library

AlmaIcons is an npm package with 450+ SVG icons in multiple styles and weights, designed for modern web, mobile, and desktop interfaces.

🌐 Site: almaicons.netlify.app

Inspired by Material Design Icons and their rich variety, I wanted to bring that same flexibility into my project while keeping a unique style. That’s exactly how AlmaIcons was envisioned: similar flexibility in weights and styles, but with a distinctive visual character so the set doesn’t feel like “just another clone.”

What’s Inside

450+ icons at launch.
2 styles: outline and fill.
Weights: 100, 200, 300, 400, 500 (600 and 700 are coming later, but not all icons have variants yet).
Tree-shaking: only imports what you actually use.
TypeScript support: strict typing and autocomplete
Compatibility: works with any framework where you can use SVG.

Installation

npm install alma-icons
# or
pnpm add alma-icons
# or
yarn add alma-icons

Usage in Vue 3 (with SVG loader)

// --- Icon.vue --- //

<script setup lang="ts">
import { defineAsyncComponent, computed, markRaw } from "vue";


import { iconManifest, type IconFullName, type IconProps } from "./icon";


const props = defineProps<IconProps>();


const symbol = computed(() => {
 const { name, style, weight } = props;


 const key = `${name}_${style}_${weight}`;


 const loader = iconManifest[key as IconFullName];
 return loader ? markRaw(defineAsyncComponent(loader)) : null;
});
</script>


<template>
 <div class="icon" data-testid="icon">
   <component v-if="symbol" :is="symbol" viewBox="0 0 24 24"></component>
 </div>
</template>

And of course, don’t forget to configure the SVGloader plugin in vite.config:

// --- vite.config.ts --- //

import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
defineConfig({ plugins: [vue(), svgLoader({ defaultImport: "component" })]})

Usage in React (with SVG loader)

import React, { Suspense, lazy } from "react";
import { iconManifest, type IconFullName, type IconProps } from "./icon";

export const Icon: React.FC<IconProps> = ({ name, style, weight }) => {
  const key = `${name}_${style}_${weight}` as IconFullName;
  const loader = iconManifest[key];

  if (!loader) {
    return null;  }

  const Symbol = lazy(loader);

  return (
    <div className="icon" data-testid="icon">
      <Suspense fallback={null}>
        <Symbol viewBox="0 0 24 24" />
      </Suspense>
    </div>
  );
};

Configure vite.config:

import react from "@vitejs/plugin-react";
import svgLoader from "vite-svg-loader";
defineConfig({plugins: [react(), svgLoader({ defaultImport: "component" })]})

Why Do Weights Matter?

In different contexts, the same icon can look very different:

In light mode, outline icons with weight 400 look great.
In dark mode, the same icons look better with weight 300, so the lines don’t overpower the UI. Just one prop — and your whole UI feels visually cohesive.

How AlmaIcons Is Different

Inspired by Material Symbols (Google’s variable font icons) with thickness, fill, and size variations.
Implemented as SVG components, making the set universal and free from font rendering limitations.
Maintains its own style: not just another clone, but a set with personality and a unified visual language.

Why This Matters

Icons are not just graphics — they’re part of the interface language. They help users navigate faster and make interactions clearer without extra text.
If icons are inconsistent, the UI feels unfinished. AlmaIcons solves this by giving you a cohesive, consistent set out of the box.

Roadmap

Support for weights 600 and 700.
New categories (editor tools, etc.).
Figma integration (a quick plugin for designers).
Most importantly — animated icons (Lottie/Rive) with state transitions (normal → active). This will make interfaces feel more alive and responsive, without custom animations for every icon.