Brand

Formance Logo

The Formance logo and icon components.

Formance
Docs

Installation#

npx shadcn@latest add @formance/formance-logo

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { FormanceLogo, FormanceIcon } from '@/components/ui/formance-logo'

The full wordmark logo, used in headers and marketing surfaces.

<FormanceLogo />

Icon Only#

The standalone icon, available in multiple sizes. Use for favicons, avatars, or compact layouts.

<FormanceIcon size="md" />

Icon Sizes#

The size prop takes a display step — xs (16px), sm (24px), md (32px), lg (48px), xl (64px), 2xl (80px), 3xl (96px) — or a control step: icon-xs (20px), icon-sm (28px), icon-md (32px), icon-lg (36px). A control step is exactly the Button size of the same name, so a mark beside a button of that size lines up without anyone matching numbers. Reach for a display step where the mark stands alone, and a control step where it sits next to one.

Colors#

A variant draws the pattern in a full circle of one brand colour, the way the brand art ships it. Use a tile where the icon stands for Formance itself — an avatar, an app tile, a list row — and the default plain icon where it sits in a line of text or a header and should follow the text colour.

<FormanceIcon variant="cobalt" size="xl" />

emerald, gold and cobalt are dark circles carrying a white pattern; slate and lilac are light circles carrying an emerald-700 one. The circle is one step of the palette in each case — emerald-700, emerald-200, lilac-500, gold-500, cobalt-600 — and slate names the light emerald pairing, matching BadgeEyebrow's variant of the same name.

The size prop means the same thing for a tile as for the plain icon: it sets the outer width, so size="xl" is a 64px circle. Inside it the pattern takes 77% of the width, the proportion the brand art draws — and the plain icon keeps that same margin with nothing behind it. So a variant can be added or dropped without the pattern changing size or moving: the circle appears around the mark rather than under a smaller one, and a row of mixed plain and tiled marks reads as one set.