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

Ações sociais

Curtir Outline = não curtido
Curtido Fill #C8F53C = ativo
Estrela Avaliação, outline vazio
Estrela cheia Fill #C8F53C = avaliado
Comentário DiscoDetalhe, atividades
Compartilhar Story, link externo
Wantlist Outline = não salvo
Wantlist salvo Fill #C8F53C = salvo
Editar Perfil, detalhe do disco

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.