Guia de marca 2026

Ícones

Mapeamento semântico Lucide → função. Passe o mouse sobre um ícone pra copiar o SVG ou baixar o arquivo.

45 ícones

Navegação

Home / Dashboard

house

Monitor

monitor

Páginas

file-text

Aquisição / Canais

globe

Audiência / Usuários

users

Temporal / Histórico

clock

Benchmarks / Métricas

chart-column-big

Relatórios

clipboard-list

Chat / IA

message-circle

Configurações

settings

Loja online

store

Apps

layout-grid

Ações

Analisar / Buscar

search

Atualizar

refresh-cw

Download

download

Filtrar

funnel

Editar

pencil

Excluir

trash-2

Copiar

copy

Link externo

external-link

Adicionar

plus

Fechar

x

Menu hamburger

menu

Expandir/Colapsar

chevron-down

Navegar (breadcrumb)

chevron-right

Arrastar

grip-vertical

Visualizar

eye

Ocultar

eye-off

Status e feedback

Autoritativo

Sucesso

circle-check

Erro

circle-x

Alerta

triangle-alert

Informação

info

Loading

loader-circle

animado

Notificação

bell

Conteúdo

Calendário

calendar

Imagem

image

Código

code

E-mail

mail

Dinheiro / Receita

dollar-sign

Cartão de crédito

credit-card

Desconto

percent

Presente / Oferta

gift

Segurança / Lock

lock

Usuário

user

Logout

log-out

Regras de uso

  • ·Ícones são monocromáticos — cor via token semântico do DS, nunca cor fixa
  • ·Sem container decorativo por padrão (sem div com background atrás do ícone)
  • ·Em botões com ícone: ícone à esquerda do texto, gap 8px
  • ·Ícone sozinho (icon-button): área de toque mínima 44x44px
  • ·Função semântica nova → escolher ícone Lucide e adicionar ao icons.md no mesmo PR
  • ·Se o projeto já consome Nimbus dentro do ecossistema Nuvemshop, continuar com Nimbus para manter consistência

Instalação via npm

npm install lucide-react

# Uso em React

import { House } from "lucide-react";

<House size={20} />

Vitrine pública. Spec canônica vive em enp-design-system/skills/. Dados sincronizados via raw.githubusercontent.com (ISR 24h).