Command Menu

Search documentation, components, and switch theme.

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 controls the icon width: xs (16px), sm (24px), md (32px), lg (48px), xl (64px), 2xl (80px), 3xl (96px).