BuscarCtrl K

Appearance

Extensões

Ícones ​

O Arenito utiliza ícones da biblioteca IconPark (ByteDance), com 2600+ ícones SVG disponíveis. Os ícones usam stroke ao invés de fill, permitindo customizar cor, espessura e estilo via CSS.

src/icons/Abrir no Figma
  • Biblioteca: IconPark
  • Pacote: @icon-park/svg
  • Gerador: scripts/build-icons.cjs
  • Saída: src/icons/ (SVGs individuais + sprite)
  • Total atual: 62 ícones selecionados

Como usar ​

Duas formas de incluir ícones no projeto: via sprite SVG (recomendado) ou inline.

Via SVG sprite (recomendado) ​

html
<svg class="icon" width="24" height="24">
  <use href="/icons/icons-sprite.svg#home"></use>
</svg>

Via SVG inline ​

html
<!-- Copie o conteúdo do arquivo src/icons/home.svg -->
<svg width="24" height="24" viewBox="0 0 48 48" fill="none">
  <path d="M9 18V42H39V18L24 6L9 18Z" stroke="currentColor" stroke-width="3" .../>
</svg>

Configuração padrão ​

Todos os ícones são gerados com estas configurações.

PropriedadeValor
Themeoutline
Size24px
Stroke width3
Stroke linecapround
Stroke linejoinround
ColorcurrentColor

Classes CSS de tamanho ​

Classes utilitárias para controlar o tamanho dos ícones.

ClasseTamanhoUso
.icon-xs12pxBadges, tags pequenas
.icon-sm / .icon16pxPadrão, textos, botões
.icon-md20pxTítulos, cards
.icon-lg24pxHeaders, destaques
.icon-xl32pxÍcones principais
.icon-2xl40pxHero sections

Classes CSS de cor ​

Classes utilitárias para aplicar cores semânticas aos ícones.

ClasseUso
.icon-primaryAções principais (accent)
.icon-secondaryAções secundárias
.icon-mutedInformações menos importantes
.icon-successSucesso, confirmação
.icon-warningAviso, atenção
.icon-dangerErro, exclusão

Catálogo de ícones ​

Lista completa dos 62 ícones selecionados, organizados por categoria de uso.

ÍconeIDUso
homePágina inicial
chevron-leftVoltar, recolher
chevron-rightExpandir, próximo
chevron-upRecolher, ordenar asc
chevron-downExpandir, ordenar desc
arrow-leftNavegação voltar
arrow-rightNavegação avançar
menuMenu hambúrguer

Ações ​

ÍconeIDUso
closeFechar, remover
addAdicionar, criar
minusRemover, diminuir
checkConfirmar
editEditar
deleteExcluir
copyCopiar
refreshRecarregar
saveSalvar
searchBuscar
filterFiltrar
sortOrdenar
moreMais opções (horizontal)
more-verticalMais opções (vertical)

Feedback ​

ÍconeIDUso
infoInformação
alertAviso, atenção
check-circleSucesso
error-circleErro
helpAjuda

Usuário ​

ÍconeIDUso
userPerfil
usersEquipe
settingsConfigurações
bellNotificações
logoutSair
loginEntrar

Arquivos ​

ÍconeIDUso
documentDocumento
folderPasta
downloadBaixar
uploadEnviar
linkLink
attachmentAnexo
printImprimir

Visualização ​

ÍconeIDUso
eyeVisualizar
eye-offOcultar
fullscreenTela cheia
exit-fullscreenSair tela cheia
listVisualização lista
gridVisualização grid
chartGráfico

Comunicação ​

ÍconeIDUso
emailEmail
phoneTelefone
chatChat

Tempo ​

ÍconeIDUso
calendarData
clockHorário

Outros ​

ÍconeIDUso
lockBloquear
unlockDesbloquear
starFavorito
tagEtiqueta
shareCompartilhar
codeCódigo
globeWeb
mapMapa
locationLocalização
loadingCarregando

Estados ​

Classes para controlar o estado visual e interativo dos ícones.

ClasseEfeito
.icon-disabledOpacidade 40%, cursor not-allowed
.icon-clickableCursor pointer, hover com accent e scale 1.1, active scale 0.95
html
<svg class="icon icon-clickable">
  <use href="/icons/icons-sprite.svg#edit"></use>
</svg>

<svg class="icon icon-disabled">
  <use href="/icons/icons-sprite.svg#delete"></use>
</svg>

Integração com componentes ​

Classes pré-definidas para usar ícones dentro de botões, inputs, badges, alertas e navegação.

Botões ​

html
<!-- Ícone à esquerda -->
<button class="btn">
  <svg class="icon"><use href="...#add"></use></svg>
  Novo item
</button>

<!-- Botão somente ícone -->
<button class="btn icon-only">
  <svg class="icon"><use href="...#more"></use></svg>
</button>

Inputs ​

html
<div class="input-group">
  <svg class="icon"><use href="...#search"></use></svg>
  <input type="text" placeholder="Buscar...">
</div>

<!-- Ícone à direita -->
<div class="input-group">
  <svg class="icon icon-right"><use href="...#chevron-down"></use></svg>
  <input type="text" class="has-icon-right" placeholder="Selecione...">
</div>

Badges e alertas ​

html
<!-- Badge com ícone -->
<span class="badge">
  <svg class="icon"><use href="...#check"></use></svg>
  Ativo
</span>

<!-- Alerta com ícone -->
<div class="alert alert-success">
  <svg class="icon"><use href="...#check-circle"></use></svg>
  <span>Operação realizada com sucesso.</span>
</div>
html
<!-- Item de navegação -->
<a class="nav-item">
  <svg class="icon"><use href="...#home"></use></svg>
  Início
</a>

<!-- Ações em tabela -->
<div class="table-actions">
  <svg class="icon"><use href="...#edit"></use></svg>
  <svg class="icon icon-danger"><use href="...#delete"></use></svg>
</div>

Utilitários de transformação ​

Classes para rotação, espelhamento e animação de ícones.

Rotação ​

ClasseEfeito
.icon-rotate-90Rotação 90°
.icon-rotate-180Rotação 180°
.icon-rotate-270Rotação 270°

Espelhamento ​

ClasseEfeito
.icon-flip-horizontalEspelha horizontalmente
.icon-flip-verticalEspelha verticalmente

Animações ​

ClasseEfeito
.icon-spinRotação contínua (1s linear)
.icon-pulsePulso de opacidade (2s ease)
html
<!-- Loading com animação -->
<svg class="icon icon-spin">
  <use href="/icons/icons-sprite.svg#loading"></use>
</svg>

<!-- Chevron rotacionado -->
<svg class="icon icon-rotate-90">
  <use href="/icons/icons-sprite.svg#chevron-right"></use>
</svg>

Responsividade ​

Em telas menores que 768px, os tamanhos maiores são reduzidos automaticamente.

ClasseDesktopMobile (< 768px)
.icon-lg24px20px
.icon-xl32px24px
.icon-2xl40px32px

Acessibilidade ​

Boas práticas para ícones acessíveis.

RecursoUso
aria-labelÍcone com significado semântico (muda cursor para help)
.icon-label-sr-onlyTexto visível apenas para leitores de tela
aria-hidden="true"Ícone decorativo (deve ser ignorado por leitores de tela)
html
<!-- Ícone com significado -->
<svg class="icon" aria-label="Excluir item">
  <use href="...#delete"></use>
</svg>

<!-- Ícone decorativo -->
<svg class="icon" aria-hidden="true">
  <use href="...#chevron-right"></use>
</svg>

<!-- Texto acessível oculto -->
<button class="btn icon-only">
  <svg class="icon"><use href="...#close"></use></svg>
  <span class="icon-label-sr-only">Fechar</span>
</button>

Adicionar novos ícones ​

Como incluir novos ícones do IconPark no projeto.

  1. Encontre o ícone em iconpark.oceanengine.com
  2. Copie o nome PascalCase (ex: ShoppingCart)
  3. Adicione no objeto ICONS em scripts/build-icons.cjs:
    js
    ShoppingCart: 'cart',
  4. Execute: node scripts/build-icons.cjs
  • Use stroke="currentColor" -- o ícone herda a cor do texto pai
  • Prefira o sprite SVG para performance (1 request, cache do browser)
  • Use as classes de tamanho ao invés de width/height inline
Versão0.1.0
Última atualização13 mar 2026
Caminhosrc/foundation/icons.css

Design System interno do GALES

IpeWeb