Icon

Visão Geral

Para uma descrição detalhada, consulte a documentação do GovBR-DS.

Exemplos

Nome, cor, tamanho e src

Carregando exemplo

Código fonte editável

Customizando com parts

Carregando exemplo

Código fonte editável

Usando slot

Carregando exemplo

Código fonte editável

Propriedades

color

Atributo	color
Descrição	Token de cor do ícone. Consulte a lista completa em: https://next-ds.estaleiro.serpro.gov.br/componentes/icon?tokens#tokens-do-icon
Tipo	string
Valor padrão	---

customId

Atributo	custom-id
Descrição	Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado.
Tipo	string
Valor padrão	br-icon-${brIconId++}

description

Atributo	description
Descrição	Descrição textual para acessibilidade.
Tipo	string
Valor padrão	---

dimension

Atributo	dimension
Descrição	Dimensão do contêiner do ícone.
Tipo	"original" | "square" | "width-fixed"
Valor padrão	'original'

iconName

Atributo	icon-name
Descrição	Token de nome de acordo com o Fundamento Iconografia. Consulte a lista completa em: https://next-ds.estaleiro.serpro.gov.br/fundamentos/iconografia?tokens#nome-dos-icones
Tipo	string
Valor padrão	---

iconStyle

Atributo	icon-style
Descrição	Token de estilo do ícone. Consulte a lista completa em: https://next-ds.estaleiro.serpro.gov.br/componentes/icon?tokens#tokens-do-icon
Tipo	string
Valor padrão	---

size

Atributo	size
Descrição	Token de tamanho do ícone. Consulte a lista completa em: https://next-ds.estaleiro.serpro.gov.br/componentes/icon?tokens#tokens-do-icon
Tipo	string
Valor padrão	---

src

Atributo	src
Descrição	URL ou caminho para um arquivo SVG externo.
Tipo	string
Valor padrão	---

CSS Shadow Parts

Nome	Descrição
"icon-content"	Contêiner interno do conteúdo do ícone. Utilize o seletor ::part(icon-content) para customizações avançadas de layout e posicionamento.
"icon"	Contêiner principal do ícone. Utilize o seletor ::part(icon) para aplicar estilos CSS customizados externamente, como cores personalizadas fora dos tokens do design system.

Slots

Nome	Descrição
"default"	Conteúdo de ícone renderizado via slot (ex.: <i>, <svg>).

Variáveis CSS customizáveis

Nome	Descrição
--icon-color	Permite a sobrescrita externa da cor do ícone usando tokens do componente. Use shadow parts para cores customizadas.
--icon-font-size	Permite a sobrescrita externa do font-size aplicado ao ícone, atuando como intermediário para a escala de tamanho do componente.
--icon-size	Permite a sobrescrita externa do tamanho do contêiner do ícone (width/height), atuando como intermediário para os tokens de tamanho definidos pela propriedade size.

Dependências