Dashicons: como usar a fonte de ícones do WordPress

Dashicons é a fonte de ícones vetorial nativa do WordPress, carregada por padrão no painel administrativo desde a versão 3.8, com cerca de 360 ícones prontos para uso em menus, botões e blocos. Ela substitui bibliotecas externas em boa parte dos casos de uso do admin, sem custo adicional de carregamento.

Se você gerencia um site WordPress com múltiplos editores e uma pilha de plugins, sabe que cada biblioteca externa de ícones cobra um preço em performance. Carregar um pacote inteiro só para exibir três ícones pesa no tempo de carregamento e pode comprometer suas métricas de Core Web Vitals. A boa notícia é que o WordPress já entrega uma solução pronta e nativa.

Neste guia, mostramos na prática como aplicar Dashicons nos cenários que mais aparecem no dia a dia de quem desenvolve para WordPress em escala:

• Menu do admin: definir ícones em páginas de primeiro nível criadas por plugins.
• Custom Post Types: escolher o ícone que representa cada CPT no menu lateral.
• Front-end do tema: carregar a fonte de forma controlada, sem prejudicar o LCP.
• Editor de blocos: atribuir ícones a blocos customizados no Gutenberg.
• Troubleshooting: resolver os casos mais comuns em que o Dashicon não aparece.

O que é Dashicons e por que ela existe no WordPress

Antes da versão 3.8, o painel usava um sprite: uma única imagem com vários ícones recortados via CSS. O problema era evidente. Em telas de alta densidade (retina), esses ícones ficavam borrados e a manutenção era trabalhosa. A fonte de ícones resolveu isso de uma vez, porque caracteres vetoriais escalam sem perder nitidez em qualquer resolução.

Desde então, a família cresceu a cada lançamento para acompanhar novos recursos do core. Hoje, segundo a página oficial dos Dashicons no WordPress.org, são cerca de 360 ícones disponíveis. Para quem constrói plugins e temas, isso significa três ganhos diretos: unidade visual com o restante do painel, familiaridade imediata para o usuário e zero custo de carregamento extra no admin, já que a fonte vem ativa por padrão em um arquivo woff2 de aproximadamente 45 KB.

Quando usar Dashicons e quando preferir SVG inline?

A regra prática é simples: no painel administrativo, Dashicons é o padrão. No front-end, a decisão depende de quantos ícones você precisa e do impacto em performance que está disposto a aceitar.

O mecanismo importa aqui. Uma fonte de ícones carrega um arquivo único mesmo que você use apenas um ícone. Já o SVG inline carrega exatamente o que renderiza, sem peso de biblioteca. Em páginas com LCP crítico, essa diferença conta. A própria equipe do Gutenberg recomenda SVG inline para ícones de front-end quando o número de ícones é pequeno. Se você quer se aprofundar no tema, vale entender o impacto no LCP na documentação do Google.

A tabela abaixo resume as diferenças entre Dashicons, Font Awesome Free e SVG inline para ajudar na decisão:

Em resumo: use Dashicons sem hesitar no admin e em registros de menu. No front-end de um tema com poucos ícones essenciais, avalie SVG inline antes de carregar a fonte inteira globalmente.

Como visualizar a lista completa de Dashicons?

A maneira mais rápida de explorar todos os ícones é pela página oficial dos Dashicons na seção de Developers do WordPress.org. Lá você consegue filtrar pelo nome ou percorrer a grade visual completa.

Ao clicar em um ícone, ele aparece em destaque com quatro opções de cópia, cada uma útil para um contexto diferente:

• Nome: a classe do ícone (por exemplo, dashicons-share), usada em parâmetros de funções do WordPress como menu_icon ou no atributo icon de blocos.
• CSS: o código content com o caractere Unicode (por exemplo, content: "\f237";), aplicado via seletor :before em temas customizados.
• HTML: a marcação pronta com a classe (por exemplo, <span class="dashicons dashicons-share"></span>), útil para colar direto em templates.
• Glyph: o glifo para colar diretamente em editores gráficos que reconhecem a fonte, como o Photoshop.

Como adicionar um Dashicon em add_menu_page()?

A função add_menu_page() cria uma página de primeiro nível no menu do painel. O sexto parâmetro, $icon_url, aceita o nome de um Dashicon diretamente. Se você trabalha com desenvolvimento de plugins, esse é um dos usos mais frequentes da fonte.

function exemplo_uso_add_menu_page() {

  add_menu_page(
    'Título da página',
    'Título do menu',
    'nome_da_capability',
    'slug_unico_para_este_menu',
    'function_php_para_exibir_conteudo',
    'dashicons-yes'
  );

}
add_action( 'admin_menu', 'exemplo_uso_add_menu_page' );

Uma nota prática: esse parâmetro também aceita a URL de uma imagem ou um SVG codificado em base64 no formato data:image/svg+xml;base64,.... Use essa alternativa quando nenhum Dashicon representar bem a função do seu plugin. Os detalhes completos estão na documentação da função add_menu_page().

Como definir um Dashicon em register_post_type()?

Ao registrar um Custom Post Type público com register_post_type(), o WordPress cria um item de menu para acessá-lo. O argumento menu_icon define qual Dashicon representa esse menu no painel lateral.

function exemplo_uso_register_post_type() {

  register_post_type(
    'chave_unica_do_cpt',
    array(
      'public'    => true,
      'menu_icon' => 'dashicons-awards'
    )
  );

}
add_action( 'init', 'exemplo_uso_register_post_type' );

Assim como em add_menu_page(), o menu_icon também aceita SVG inline via data:image/svg+xml;base64,.... É a saída ideal quando você precisa de um ícone exclusivo e quer manter a leveza de um vetor. A lista de argumentos aceitos está na referência oficial de register_post_type().

Como carregar Dashicons no front-end do tema?

Por padrão, a fonte só é carregada no admin. Para usar Dashicons no front-end do seu tema, você precisa enfileirar a folha de estilo manualmente. Há duas formas.

A primeira é carregar a fonte de forma autônoma:

function exemplo_dashicons_frontend() {

  wp_enqueue_style( 'dashicons' );

}
add_action( 'wp_enqueue_scripts', 'exemplo_dashicons_frontend' );

A segunda é declarar Dashicons como dependência da sua folha de estilo principal, garantindo a ordem de carregamento correta:

function exemplo_dashicons_dependencia() {

  wp_enqueue_style( 'meu-css', get_stylesheet_uri(), array( 'dashicons' ) );

}
add_action( 'wp_enqueue_scripts', 'exemplo_dashicons_dependencia' );

Depois disso, basta aplicar as classes do ícone na marcação. O uso mais comum em temas customizados é via CSS com o seletor :before, que insere o ícone antes de um elemento sem sujar o HTML:

.meu-link:before {
  font-family: dashicons;
  content: "\f237";
  margin-right: 6px;
}

Quando o ícone é apenas decorativo e o texto ao lado já comunica o significado, marque o span com aria-hidden="true". Isso evita que leitores de tela anunciem um caractere sem sentido, um cuidado de acessibilidade que o Google valoriza em conteúdo técnico:

<span class="dashicons dashicons-share" aria-hidden="true"></span>

Um aviso importante: avalie o impacto no LCP antes de carregar a fonte globalmente. Se você só precisa de dois ou três ícones em páginas-chave, o SVG inline tende a ser mais leve. Carregar a folha de estilo em todas as páginas do site só para exibir um ícone raramente compensa em projetos que levam performance a sério.

Como usar Dashicons no editor de blocos (Gutenberg)?

Ao registrar um bloco customizado com registerBlockType(), o atributo icon aceita uma string com o nome de um Dashicon. É a forma mais simples de dar identidade visual ao seu bloco na barra de inserção.

registerBlockType( 'meu-plugin/meu-bloco', {
  title: 'Meu bloco',
  icon: 'awards',
  category: 'widgets',
  edit: Edit,
  save: Save,
} );

Repare que, no Gutenberg, você informa apenas o nome curto do ícone (awards em vez de dashicons-awards). Se quiser mais controle, é possível passar o componente <Icon> do pacote @wordpress/icons, que já traz uma biblioteca de ícones pensada para o editor.

Quando o ícone do bloco precisa de identidade própria ou não existe entre os Dashicons, o atributo também aceita um elemento SVG inline, o que costuma ser a melhor escolha para blocos de marca. Os detalhes estão no atributo icon na Block API.

Dashicons não aparece: como resolver?

Quando o ícone simplesmente não renderiza, a causa quase sempre está em um destes pontos. Vale checar na ordem abaixo antes de suspeitar de algo mais complexo:

• Fonte não enfileirada no front-end: o erro mais comum é esquecer o wp_enqueue_style('dashicons'). No admin a fonte é nativa, mas no tema ela precisa ser carregada explicitamente.
• Nome do ícone errado: um caractere fora do lugar na classe (por exemplo dashicons-award em vez de dashicons-awards) faz o ícone não aparecer. Confirme o nome exato na página oficial dos Dashicons.
• Cache servindo CSS antigo: o navegador ou um plugin de cache pode estar entregando uma versão anterior da folha de estilo. Limpe o cache do plugin e faça um hard refresh no navegador.
• Tema desabilitando estilos do core: alguns temas removem estilos padrão do WordPress para otimizar o front-end e acabam derrubando o Dashicons junto. Verifique se há um wp_dequeue_style('dashicons') ativo no seu tema ou plugin.

Perguntas frequentes sobre Dashicons

Dashicons vem ativado por padrão no WordPress?

Sim, no painel administrativo. A fonte é carregada automaticamente em todas as telas do admin desde a versão 3.8, sem necessidade de nenhum enqueue. No front-end, porém, ela não vem ativa por padrão e precisa ser carregada manualmente com wp_enqueue_style('dashicons').

Como mudar a cor de um Dashicon?

Como Dashicons é uma fonte, a cor é controlada pela propriedade CSS color, exatamente como um texto comum. No painel, ícones de menu herdam currentColor automaticamente. Para um ícone específico no front-end, basta aplicar color ao elemento que carrega a classe do Dashicon.

Posso usar Dashicons fora do WordPress?

Sim. A fonte está disponível publicamente e pode ser carregada em qualquer projeto web. Há também uma versão OTF para uso em editores gráficos como o Photoshop: basta instalar a fonte e colar o glifo copiado da página oficial. Ainda assim, fora do ecossistema WordPress, costuma fazer mais sentido optar por bibliotecas SVG modernas.

Dashicons prejudica a performance do site?

No painel administrativo, o impacto é irrelevante, já que a fonte é nativa. No front-end, carregar a folha de estilo adiciona um arquivo woff2 de aproximadamente 45 KB. Para sites com LCP sensível, vale comparar esse peso com a alternativa de SVG inline, que carrega só os ícones realmente renderizados na página.

Qual a diferença entre Dashicons e Font Awesome?

Dashicons é nativo do WordPress, tem cerca de 360 ícones e foca no visual do painel administrativo. Font Awesome é uma biblioteca de terceiros, com cerca de 2.000 ícones na versão gratuita, voltada para o front-end. Para o admin, Dashicons vence pela integração nativa. Para front-ends com muitos ícones diferentes, Font Awesome oferece mais variedade.

Como usar Dashicons no menu do administrador?

No menu do admin, você define o Dashicon passando o nome da classe (por exemplo dashicons-yes) no sexto parâmetro de add_menu_page() ou no argumento menu_icon de register_post_type(). Não é preciso enfileirar nada, porque a fonte já está ativa em todas as telas do painel.

É possível adicionar ícones customizados junto com Dashicons?

Sim. Tanto add_menu_page() quanto register_post_type() aceitam SVG codificado em base64 no formato data:image/svg+xml;base64,... no lugar do nome de um Dashicon. Isso permite misturar ícones nativos com ícones próprios de marca sem carregar bibliotecas externas.

Conclusão

Dashicons resolve a grande maioria das necessidades de ícones no admin do WordPress sem custo de performance e sem plugins. Para menus, Custom Post Types e blocos do Gutenberg, é a escolha natural: nativa, escalável e alinhada visualmente ao painel. No front-end, a regra é medir antes de carregar. Se são poucos ícones críticos, o SVG inline costuma preservar melhor o LCP; se o volume cresce, aí sim vale enfileirar a fonte de forma controlada.

Sua equipe gasta tempo em ajustes de front-end e infraestrutura que travam a publicação de conteúdo e atrasam campanhas? Aqui na Apiki, nosso time cuida da manutenção, performance e evolução técnica do seu WordPress em escala, para que os editores e o marketing foquem no que realmente importa. Conheça o WP Care e tire da frente os gargalos técnicos que dependem da TI interna.