Trademark Disclaimer

All product names, logos, brands, and trademarks featured or referenced in this repository are the property of their respective owners. This project is not affiliated with, endorsed by, sponsored by, or associated with any trademark owner. Brand assets are provided solely for developer convenience, interface prototyping, educational purposes, and design system workflows.

AlmaBrands

Alma Brands is a structured brand asset system for scalable UI products, design tools, runtime interfaces, and developer workflows.

The library provides normalized SVG brand assets with a stable, versioned taxonomy and generated React/Vue component exports. It is designed to work as a companion package to Alma Icons while keeping brand assets, naming, licensing notes, and package lifecycle separate.

• 63 unique brand assets
• 2 primary variants: mark & standard
• Multiple appearances, including color and monochrome
• Stable, scalable taxonomy
• SSR-friendly React and Vue components
• Tree-shakeable static imports
• Runtime-ready dynamic component API

Naming Topology

Alma Brands uses a deterministic naming structure:

<name>_<variant>_<appearance>

Examples:

figma_mark_monochrome
github_mark_color
openai_standard_monochrome
stripe_standard_color

Categories

The library currently includes brand assets for:

• Dev Apps
• AI / LLM
• Tech Stack
• Payments / SaaS
• Cloud / Infra
• Browsers
• Social
• Design Apps
• CI/CD
• Dev Frameworks
• Brand Assets

Demo

🌐 almaicons.netlify.app

Installation

Using pnpm:

pnpm add alma-brands

Using npm:

npm install alma-brands

Using yarn:

yarn add alma-brands

Usage

Alma Brands supports two integration modes.

Static mode

Static mode is recommended for production UI. Import only the brand assets your app uses; bundlers can tree-shake the rest, and direct components are SSR-friendly.

React:

import { FigmaMarkMonochrome } from "alma-brands/react/icons";

export function FigmaLink() {
  return <FigmaMarkMonochrome />;
}

Direct per-icon React import:

import FigmaMarkMonochrome from "alma-brands/react/icons/FigmaMarkMonochrome";

Vue:

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

<template>
  <FigmaMarkMonochrome />
</template>

Direct per-icon Vue import:

import FigmaMarkMonochrome from "alma-brands/vue/icons/FigmaMarkMonochrome";

Dynamic mode

Dynamic mode is for brand browsers, search UIs, plugin UIs, previews, dashboards, and other places where the brand asset is chosen at runtime. It uses a lazy generated manifest and resolves assets by name, variant, and appearance.

React:

import { AlmaBrand } from "alma-brands/react";

export function Preview() {
  return <AlmaBrand name="figma" variant="mark" appearance="monochrome" />;
}

Vue:

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

<template>
  <AlmaBrand name="figma" variant="mark" appearance="monochrome" />
</template>

The root package also exposes metadata and the generated lazy SVG manifest:

import {
  brandManifest,
  brandNames,
  brandVariants,
  brandAppearances,
  hasBrandVariant,
  resolveBrandKey,
  type AlmaBrandName,
  type AlmaBrandVariant,
  type AlmaBrandAppearance,
} from "alma-brands";

const key = resolveBrandKey({
  name: "figma",
  variant: "mark",
  appearance: "monochrome",
});

const exists = hasBrandVariant({
  name: "figma",
  variant: "mark",
  appearance: "monochrome",
});

License

Alma Brands, 2026 Misha Grebennikov
https://github.com/yamogoo

Licensed under the MIT License.

Brand names, logos, and trademarks remain the property of their respective owners.