https://github.com/yamogoo/alma-icons
Modern Icons Library with multi-width designs for every UI
https://github.com/yamogoo/alma-icons
design-system frontend-development icons icons-library svg ui-design ui-icons ui-kit ux-design
Last synced: about 2 months ago
JSON representation
Modern Icons Library with multi-width designs for every UI
- Host: GitHub
- URL: https://github.com/yamogoo/alma-icons
- Owner: yamogoo
- License: other
- Created: 2025-09-13T09:04:14.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2026-04-19T14:05:52.000Z (2 months ago)
- Last Synced: 2026-04-19T16:35:51.889Z (2 months ago)
- Topics: design-system, frontend-development, icons, icons-library, svg, ui-design, ui-icons, ui-kit, ux-design
- Language: JavaScript
- Homepage: https://almaicons.netlify.app/
- Size: 7.3 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AlmaIcons
[](./LICENSE)
Alma Icons is a **production-ready icon system** designed for scalable UI products.
The library includes **1216 icons** (608 outline, 608 fill) built on a consistent **100–500 weight stroke system** with a stable, versioned taxonomy.
Perfect for design systems, product interfaces, and long-term UI development.
- **1214 icons** (607 outline, 607 fill)
- **2 styles**: `fill` & `outline`
- **5 weights**: `100` - `500`
- Stable, scalable taxonomy
- Strict geometric consistency
## Demo
🌐 [almaicons.netlify.app](https://almaicons.netlify.app/)
## Figma Community
Explore the full library in Figma:
👉 https://www.figma.com/community/file/1607825775789504167/alma-icons
## Preview
Here are just a few examples (each available in 2 styles × 5 weights):
| Icon name | Fill (300) | Outline (300) |
| -------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| `rocket` |  |  |
| `football` |  |  |
| `bag` |  |  |
| `folderClosed` |  |  |
> 👉 Every icon supports **weights 100 → 500**.
## Installation
Using **pnpm**:
```bash
pnpm add alma-icons
```
Using **npm**:
```bash
npm install alma-icons
```
Using **yarn**:
```bash
yarn add alma-icons
```
## Usage
Alma Icons supports two integration modes.
### Static mode
Static mode is recommended for production UI. Import only the icons your app uses; bundlers can tree-shake the rest, and direct icon components are SSR-friendly.
React:
```tsx
import { SearchOutline400 } from "alma-icons/react/icons";
export function SearchButton() {
return ;
}
```
Direct per-icon React import:
```tsx
import SearchOutline400 from "alma-icons/react/icons/SearchOutline400";
```
Vue:
```vue
import { SearchOutline400 } from "alma-icons/vue/icons";
```
Direct per-icon Vue import:
```ts
import SearchOutline400 from "alma-icons/vue/icons/SearchOutline400";
```
### Dynamic mode
Dynamic mode is for icon browsers, search UIs, plugin UIs, previews, and other places where the icon name is chosen at runtime. It uses a lazy generated manifest and resolves icons by name, style, and weight.
React:
```tsx
import { AlmaIcon } from "alma-icons/react";
export function Preview() {
return ;
}
```
Vue:
```vue
import { AlmaIcon } from "alma-icons/vue";
```
The root package also exposes metadata and the backwards-compatible lazy SVG manifest:
```ts
import {
iconManifest,
iconNames,
iconStyles,
iconWeights,
hasIconVariant,
resolveIconKey,
type AlmaIconName,
type AlmaIconStyle,
type AlmaIconWeight,
} from "alma-icons";
const key = resolveIconKey({ name: "search", style: "outline", weight: "400" });
const exists = hasIconVariant({
name: "search",
style: "outline",
weight: "400",
});
```
> Package examples use the current package name, `alma-icons`. If you publish split scoped entry packages, the same generated API maps to `@alma-icons/react`, `@alma-icons/react/icons`, `@alma-icons/vue`, and `@alma-icons/vue/icons`.
## Development
To regenerate icons after adding new SVG files, run from the repository root or `packages/alma-icons`:
```bash
pnpm generate
```
This updates `dist/`, `index.js`, and `index.d.ts` with metadata, the lazy SVG manifest, and generated React/Vue components.
To validate the generated package surface, run from the repository root or `packages/alma-icons`:
```bash
pnpm validate
```
## License
Alma Icons © 2025–2026 [Misha Grebennikov](https://github.com/yamogoo)
https://github.com/yamogoo
Licensed under [CC BY-NC 4.0](https://creativecommons.org/licenses/by-nc/4.0/)
.
- You must give appropriate credit, provide a link to the license, and indicate if changes were made.
- **You may not use the icons for commercial purposes.**