Moexi

A lightweight kawaii icon library for the web.

@blcklab/moexi is the framework-agnostic core. It ships 256 SVG icons, three outline weights, TypeScript types, ESM/CommonJS builds, DOM rendering, SSR-safe SVG strings, custom icon packs, and zero runtime dependencies.

Install

npm install @blcklab/moexi

Use an icon

Create a real SVG element in the browser:

import { createIcon, search } from '@blcklab/moexi';

const icon = createIcon(search, {
  size: 20,
  ariaLabel: 'Search',
});

document.querySelector('#search')?.append(icon);

Render an SVG string for SSR or static HTML:

import { heart, renderSvg } from '@blcklab/moexi';

const svg = renderSvg(heart, {
  size: 24,
  variant: 'bold',
  ariaLabel: 'Favorite',
});

For the smallest import boundary, import the icon directly:

import search from '@blcklab/moexi/icons/search';

Or import a category:

import {
  database,
  gitBranch,
  terminal,
} from '@blcklab/moexi/categories/development';

Weights

Every core icon supports thin, regular, and bold.

renderSvg(heart, { variant: 'thin' });
renderSvg(heart, { variant: 'regular' });
renderSvg(heart, { variant: 'bold' });

regular is the default.

Color

Most icons use currentColor, so normal CSS is enough:

const icon = createIcon(heart, {
  className: 'favorite-icon',
});

.favorite-icon {
  color: oklch(65% 0.22 20);
}

Moexi also accepts CSS variables, oklch(), color(), color-mix(), and other valid CSS color strings. Selected icons have optional semantic color variants.

Accessibility

Icons are decorative by default. Give an icon an accessible name when the icon itself carries meaning:

createIcon(search, {
  size: 20,
  ariaLabel: 'Search',
});

For an icon inside a labeled button, keep the icon decorative and label the button instead.

Core collection

Moexi core is capped at 256 general-purpose icons across 11 categories:

| Category | Count | | --- | ---: | | UI | 20 | | Navigation | 20 | | Development | 20 | | Files | 20 | | Symbols | 20 | | Communication | 26 | | Media | 26 | | Devices | 26 | | Weather | 26 | | Commerce | 26 | | Lifestyle | 26 |

Specialized collections belong in separate Moexi-compatible packs instead of making core bigger.

Other packages

Use the adapter that matches your stack:

• @blcklab/moexi-react
• @blcklab/moexi-vue
• @blcklab/moexi-svelte
• @blcklab/moexi-porma
• @blcklab/moexi-css

Docs

The source repository includes short guides in docs/ for rendering, styling, accessibility, SSR, custom icons, packs, authoring tools, and troubleshooting. They are intentionally not included in the npm package.

Requirements

• Node.js 20+ for package tooling
• Modern browsers for DOM rendering
• No runtime dependencies

License

MIT