Design System

Icons

Padrão de ícones com Lucide (lucide-react). Todos os componentes usam Lucide para ícones.

Padrão de Uso

import { Search } from "lucide-react";

<Search size={18} className="text-foreground" />

Tamanhos

O prop size aceita pixels.

12px
16px
18px
20px
24px
32px

Ícones Disponíveis

Ícones mais usados no projeto. Todos de lucide-react.

Search

Busca

ShoppingBag

Sacola

ShoppingCart

Carrinho

Heart

Favoritos

User

Conta/Perfil

MapPin

Localização

Package

Pedidos/Pacotes

Menu

Menu hamburguer

MessageCircle

Mensagens/Ajuda

MessageCircle

WhatsApp

CreditCard

Pagamento

Gauge

Dashboard

Settings

Configurações

Store

Loja

Tags

Categorias

Crown

Premium/Plano

Archive

Arquivo

Tag

Produtos

Sparkles

Lojistas

Shield

Gerentes de contas

Truck

Logística

Puzzle

Integrações

Referência de Ícones

Mapeamento de ícones Hugeicons antigos para Lucide. Use Lucide em todos os novos componentes.

Hugeicons AntigoLucide Novo
SearchSearch
ShoppingBagShoppingBag
HeartHeart
UserUser
MapPinMapPin
PackagePackage
MenuMenu
MessageCircleMessageCircle
SettingsSettings
BellBell
HelpCircleHelpCircle
PlusPlus
PanelLeftPanelLeft
MoreHorizontalMoreHorizontal
PencilPencil
Trash2Trash2
CopyCopy
EyeEye
ExternalLinkLink2
RefreshCwRotateCw
SlidersHorizontalFilter
ChevronRightArrowRight
InfoInfo