Brand
Formance Logo
The Formance logo and icon components.
FormanceCustom component built for Formance products.
Installation#
npx shadcn@latest add @formance/formance-logoInstall the following dependencies:
npm install class-variance-authorityCopy 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'Full 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).