Icon

Niom exports lightweight SVG icon components and a generic Icon renderer. Use an icon directly, or pass it to Icon through its icon prop. Icons accept standard SVG props plus size and color.

Icon catalog

Menu

Cross

Cart

Heart

ArrowDown

ArrowUp

ArrowRight

ArrowLeft

Search

Check

Eye

EyeOff

Star

StarFilled

HalfStarFilled

LoginIcon

Profile

DropDown

PlusIcon

MinusIcon

GoogleLogo

GitHubLogo

WhatsAppLogo

FacebookLogo

InstagramLogo

TikTokLogo

PaypalLogo

MCBLogo

MasterCard

MailIcon

PhoneIcon

InformationIcon

HomeIcon

BitcoinLogo

TruckIcon

WarningIcon

CardIcon

LockIcon

ShieldIcon

ServerIcon

CoffeeIcon

EditIcon

MoneroIcon

PlainBitcoinLogo

DogecoinLogo

LitecoinLogo

SolanaIcon

EthLogo

TrashIcon

CalenderIcon

BagIcon

AttachmentIcon

MaximiseIcon

MinimiseIcon

SettingsIcon

Download

import { Button, Cart, Icon } from "niom-parts";

<Button aria-label="Open cart" variant="ghost">
  <Icon icon={Cart} size={20} aria-hidden="true" />
</Button>;

Common use cases

Decorative icons should be hidden from assistive technology, while icon-only buttons need an accessible label.

Live Editor

function IconUseCases() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button leftIcon={<Search size={18} aria-hidden="true" />}>Search</Button>
      <Button aria-label="Add to favorites" variant="outline">
        <Heart size={19} />
      </Button>
      <span className="inline-flex items-center gap-2 text-accent">
        <Check size={18} aria-hidden="true" />
        Payment confirmed
      </span>
      <ArrowRight size={28} color="var(--color-secondary)" />
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default
icon	ComponentType<SVGprops>	required by Icon
size	number | string	icon-specific
color	string	"currentColor"
SVG attributes	SVGProps<SVGSVGElement>	-