@create-ui/assets

900+ production-ready SVG marks as fully typed React components. Banks, brands, flags, payments, app store badges, and social icons, ready to drop into any React app.

This is the official asset library for Create UI. Every mark is a real React component with forwardRef, full SVGProps typing, and brand-accurate colors. Import by category, style with your own utilities, and ship only what you use. No sprite sheets, no runtime config, no font hacks.

Highlights

• 906 first-party components across 6 categories, plus curated re-exports of two popular icon sets.
• Fully typed. Each component accepts every SVGProps<SVGSVGElement> prop and forwards its ref.
• Tree-shakeable. Per-subpath entry points and "sideEffects": false mean unused assets never reach your bundle.
• ESM and CJS. Ships both module formats with generated .d.ts declarations.
• Brand-accurate. Colors are baked in per the official brand guidelines, so a Visa mark looks like Visa everywhere.
• Light and dark ready. Many marks ship Black and White variants for placement on any background.

Install

pnpm add @create-ui/assets
# npm install @create-ui/assets
# yarn add @create-ui/assets
# bun add @create-ui/assets

Requires react >= 18 as a peer dependency. Node >= 18 for tooling.

Categories

Each category is its own import subpath, so you only pull in what you reference.

| Subpath | Count | What it contains | Example exports | |---|---|---|---| | @create-ui/assets/badges | 36 | App store and marketplace badges | AppStore, AppStoreBlack, GooglePlay, ChromeWebStore | | @create-ui/assets/banks | 50 | Bank, neobank, fintech, and exchange logos | BankOfAmerica, Barclays, DeutscheBank, CheckoutCom | | @create-ui/assets/brands | 132 | Tech and product brand logos | Docker, Notion, React, Vue, AdobeIllustrator | | @create-ui/assets/flags | 262 | Country and territory flags | Turkey, UnitedStates, Germany, Japan, AntiguaAndBarbuda | | @create-ui/assets/payments | 276 | Card schemes and payment provider marks | VisaColor, MastercardColor, ApplePayColor, StripeColor | | @create-ui/assets/social | 150 | Social and platform icons | Github, Apple, AppleBlack, Behance, Bluesky | | @create-ui/assets/icons | re-export | General-purpose UI icons | re-exports @remixicon/react | | @create-ui/assets/crypto | re-export | Crypto tokens and networks | re-exports @web3icons/react |

Component names are PascalCase. Flags use the full country or territory name (Turkey, UnitedStates, Afghanistan). Marks that ship in more than one treatment add a suffix, so you pick the variant you want rather than a bare name: VisaColor, VisaBlack, VisaWhite, VisaLight, VisaLogotype, VisaBadge.

Quick start

import { VisaColor, MastercardColor } from "@create-ui/assets/payments"
import { Turkey } from "@create-ui/assets/flags"

export function Checkout() {
  return (
    <div className="flex items-center gap-2">
      <VisaColor width={32} height={20} />
      <MastercardColor width={32} height={20} />
      <Turkey width={20} height={20} aria-label="Türkiye flag" />
    </div>
  )
}

Sizing and styling

Source dimensions are stripped during the build, so every component renders at its CSS or intrinsic default until you give it a size. Set one with a utility class or explicit width and height:

import { Docker } from "@create-ui/assets/brands"

<Docker className="size-6" />
<Docker width={48} height={48} />

Because each mark carries its official brand colors inline, color is fixed by design and does not follow text-* or color utilities. This keeps logos correct and compliant wherever they appear. When you need a logo on a contrasting surface, reach for the Black or White variant instead of trying to recolor it.

Accessibility

Components pass through every accessibility attribute. Label marks that carry meaning, and hide purely decorative ones:

<VisaColor role="img" aria-label="Visa" />
<UnitedStates aria-hidden width={16} height={16} />

Light and dark variants

Many badges, social icons, and payment marks ship explicit Black and White variants tuned for placement on light or dark backgrounds:

import { AppStoreBlack, AppStoreWhite } from "@create-ui/assets/badges"

function StoreBadge({ theme }: { theme: "light" | "dark" }) {
  return theme === "dark" ? <AppStoreWhite /> : <AppStoreBlack />
}

Icons and crypto

The icons and crypto subpaths are curated re-exports, so the full upstream API is available under one install:

import { RiHeartLine, RiSearchLine } from "@create-ui/assets/icons"
import { TokenBTC, NetworkEthereum } from "@create-ui/assets/crypto"

See the Remix Icon and Web3 Icons docs for the complete sets and their props.

TypeScript

Types ship with the package, no @types install required. Every component is a ForwardRefExoticComponent that accepts all SVG props plus a ref, so editors autocomplete className, width, style, event handlers, and aria-* out of the box.

import type { SVGProps } from "react"
import { Notion } from "@create-ui/assets/brands"

const Logo = (props: SVGProps<SVGSVGElement>) => <Notion {...props} />

Tree-shaking

The package is marked "sideEffects": false and exposes a separate entry point per category, built as ESM and CJS. Modern bundlers drop everything you do not import, so referencing two flags out of 262 ships only those two.