Fundação

Iconografia

SVGs inline, sem biblioteca de ícones. Todos em viewBox="0 0 24 24", tamanho padrão w-5 h-5 (20px) ou w-6 h-6 (24px) dependendo do contexto. stroke-width: 2 para outline, preenchimento sólido para estado ativo.

Navegação

Busca Header, Listas, Buscar

Notificação Header

Voltar Detalhes, Cadastro

Chevron Listas, menus, perfil

Fechar Sheets, banners, campos

Filtrar Listas

Adicionar BottomNav (fundo verde)

Check Confirmações, toasts

BottomNav

Início

Feed

Coleção

Perfil

Início ativo HeroIcons Solid

Início inativo Outline, #888

Feed ativo Ponto preenchido

Feed inativo Outline, #888

Coleção ativa Vinil sólido

Coleção inativa Vinil outline, #888

Perfil ativo HeroIcons Solid

Perfil inativo Outline, #888

Conteúdo musical

Música Estados vazios da coleção

Disco vinil BottomNav Coleção

Relógio Data, sync de metadados

Atividade Atividades, estatísticas

Estatísticas Estatísticas de coleção

Usuário e comunidade

Perfil BottomNav, amigos

Seguir Botão de seguir no perfil

Info Avisos, metadados

Sistema

Importar ImportarDiscogs

Câmera Foto de perfil

Externo Links, Discogs, Instagram

Editar campo Edição inline de metadados

Escanear Scanner de código de barras

Instagram Compartilhar Story

Regras de uso

Todos os ícones são SVGs inline com viewBox="0 0 24 24". Sem dependência de biblioteca no bundle.
Tamanho padrão: w-5 h-5 (20px) em ações dentro de cards; w-6 h-6 (24px) no BottomNav e headers.
Cor padrão: stroke="currentColor" herdando a cor do elemento pai. Nunca hardcode de cor diretamente no SVG, exceto nos estados especiais (curtido, wantlist salvo).
Estado ativo usa fill="#C8F53C" (curtir, estrela, wantlist). Estado inativo usa fill="none" stroke="currentColor".
Ícones de estados vazios usam stroke="#C8F53C" e strokeWidth="1.5" para parecer mais leve.
BottomNav: ícone ativo usa variante sólida (filled) em #f5f5f5; inativo usa outline em #888 com opacity-40 no avatar.