Icons

The Neptune icon library

~94 original 24px stroke icons drawn on one grid — crisp at any size, themeable through currentColor, and shipped as @neptune.fintech/icons. Search, recolour, and copy any icon as a web element, raw SVG, or bare name.

npm i @neptune.fintech/icons

Tip: a cell copies <npt-icon> by default. Hover (or focus) to also copy raw SVG or the bare name.

Use it

Register the elements once, then drop <npt-icon> anywhere — it inherits currentColor, so it themes automatically with the surrounding text or any --md-sys-color-* role.

// web — register the custom elements once
import { registerIcons } from "@neptune.fintech/icons"; registerIcons();

<npt-icon name="card" size="24"></npt-icon>
<!-- inherits currentColor — colour it with text colour or a role -->
<span style="color: var(--md-sys-color-primary)"><npt-icon name="transfer"></npt-icon></span>

// or get a complete SVG string (24×24, stroke=currentColor)
import { iconSvg } from "@neptune.fintech/icons";
el.innerHTML = iconSvg("card", { size: 32 });

Because every glyph strokes with currentColor, an icon picks up the ink of its container — no per-theme icon sets, no recolouring at build time. The same names work on Flutter, React, Vue, Svelte and React Native.

Payment & fintech brands

Card networks, money-transfer and local Libyan rails — for cards, checkout and accepted-methods rows. Use <npt-brand-mark name="visa"> or brandMarkSvg("visa").

Colour shows brand colours · mono & outline ink with currentColor (themeable). 16–20 match a mobile accepted-methods row; 24–32 suit desktop checkout. Click a mark to copy its element.