Ambrosio Health — Brand Portal

Total icons

Sizes

Use icons at recommended sizes to maintain visual consistency.

16px · micro

20px · small

24px · base

32px · medium

48px · large

64px · xlarge

Three ways to use Ambrosio Health icons in your project.

Lucide React

The current Next.js project uses the lucide-react library, importing icons directly into the component.

// Importando o ícone
import { Heart } from 'lucide-react';

// Utilização no render
<Heart size={24} strokeWidth={1.5} />

CSS Styling

With lucide components, you can pass the className prop to style them via Tailwind.

/* Herda a cor especificada */
<Heart className="text-brand-orange hover:text-brand-dark transition-colors" />

Choose the ideal format for your workflow.

Lucide Icons

Access the complete lucide icon documentation to find additional icons compatible with the identity.

Figma Library

Figma components with size, color and state variants. Direct integration to the Design System.

React Components

NPM package with each icon as a typed React component via lucide-react.