Iconografia

Biblioteca de ícones usando Lucide React. Ícones consistentes, acessíveis e otimizados para o IARA.

Biblioteca

Usamos Lucide React para iconografia consistente.

Lucide Icons (Site Oficial)npm install lucide-react

Personalização

Ajuste tamanho e espessura.

Fundo escuro
Fundo claro
Accent

Galeria de Ícones

Clique em um ícone para copiar o código.

Home
Menu
X
ChevronDown
ChevronUp
ChevronLeft
ChevronRight
ArrowLeft
ArrowRight
ArrowUp
ArrowDown
ExternalLink
Link
Search
Filter
Plus
Minus
Check
Copy
Download
Upload
Edit
Trash2
Settings
MoreHorizontal
MoreVertical
MessageCircle
MessageSquare
Send
Mail
Phone
Video
Mic
Bell
BellRing
AtSign
User
Users
UserPlus
UserCheck
UserX
Contact
CircleUser
File
FileText
Folder
Image
Camera
Calendar
Clock
Star
Heart
Bookmark
Tag
Hash
Building
Briefcase
CreditCard
DollarSign
ShoppingCart
Package
BarChart
PieChart
TrendingUp
TrendingDown
Target
AlertCircle
AlertTriangle
Info
HelpCircle
CheckCircle
XCircle
Loader
LoaderCircle
Sparkles
Bot
Cpu
Zap
Wifi
Globe
Smartphone
Monitor
Laptop
Share
Share2
ThumbsUp
ThumbsDown
Eye
EyeOff
Sun
Moon
Palette

Como Usar

Exemplos de código React.

Import
import { Bot, MessageCircle, Zap } from "lucide-react";
Uso básico
<Bot size={24} strokeWidth={2} />
Com Tailwind
<Bot className="w-6 h-6 text-iara-verde-accent" />

Diretrizes

Boas práticas de uso.

✓ Faça

  • • Use tamanhos consistentes (16, 20, 24px)
  • • Mantenha strokeWidth em 2 para consistência
  • • Use cores do design system
  • • Adicione aria-label para acessibilidade
  • • Combine com texto quando necessário

✗ Evite

  • • Misturar bibliotecas de ícones
  • • Usar tamanhos muito pequenos (<16px)
  • • Ícones como único indicador de ação
  • • Cores que não contrastem com o fundo
  • • Ícones decorativos sem propósito