Icons

Padrão de ícones com Hugeicons (alinhado com o Figma). Todos os novos componentes devem usar Hugeicons. Migrar gradualmente de Lucide/Remixicon quando tocar em componentes existentes.

Padrão de Uso

import { HugeiconsIcon } from "@hugeicons/react";
import { Search01Icon } from "@hugeicons/core-free-icons";

<HugeiconsIcon
  icon={Search01Icon}
  size={18}
  color="currentColor"
  strokeWidth={1.5}
/>

Tamanhos

O prop size aceita pixels.

12px

16px

18px

20px

24px

32px

Ícones Disponíveis

Ícones mais usados no projeto. Todos de @hugeicons/core-free-icons.

Search01

Busca

ShoppingBag01

Sacola

ShoppingCart02

Carrinho

Favourite

Favoritos

User

Conta/Perfil

Location06

Localização

Package02

Pedidos/Pacotes

Menu01

Menu hamburguer

Message01

Mensagens/Ajuda

CreditCard

Pagamento

DashboardSpeed01

Dashboard

Settings02

Configurações

Store01

Loja

Migração Lucide → Hugeicons

Ao tocar num componente que usa Lucide ou Remixicon, migrar os ícones para Hugeicons.

Lucide	Hugeicons
Search	`Search01Icon`
ShoppingBag	`ShoppingBag01Icon`
Heart	`FavouriteIcon`
User	`UserIcon`
MapPin	`Location06Icon`
Package	`Package02Icon`
Menu	`Menu01Icon`
MessageCircle	`Message01Icon`
Settings	`Settings02Icon`
Bell	`Notification01Icon`
HelpCircle	`HelpCircleIcon`
Plus	`Add01Icon`
PanelLeft	`SidebarLeft01Icon`
MoreHorizontal	`MoreHorizontalIcon`
Pencil	`PencilEdit01Icon`
Trash2	`Delete02Icon`
Copy	`Copy01Icon`
Eye	`ViewIcon`
ExternalLink	`LinkSquare02Icon`
RefreshCw	`ArrowReloadHorizontalIcon`
SlidersHorizontal	`FilterHorizontalIcon`
ChevronRight	`ArrowRight01Icon`
Info	`InformationCircleIcon`