---
title: Icon
description: O componente Icon é um recurso essencial na criação de páginas web, possibilitando a inserção de ícones em seu template. Esses ícones são elementos visuais que contribuem significativamente para a identificação e descrição de diversas partes do seu conteúdo, enriquecendo…
url: "https://gaianocode.com.br/docs/icon/"
updated: "2024-02-06"
category: Pages / Page Componentes / Icon
---

# Icon

O componente Icon é um recurso essencial na criação de páginas web, possibilitando a inserção de ícones em seu template. Esses ícones são elementos visuais que contribuem significativamente para a identificação e descrição de diversas partes do seu conteúdo, enriquecendo a experiência do usuário. Com a ferramenta Icon, você tem a flexibilidade de adicionar e posicionar ícones de maneira estratégica em suas páginas web, proporcionando clareza e orientação visual aos usuários. Além disso, a capacidade de personalizar e editar esses ícones conforme necessário torna essa funcionalidade valiosa para adaptar a apresentação e o design do seu projeto às suas preferências e requisitos específicos.

![](https://gaianocode.com.br/wp-content/uploads/2024/01/Icon-1024x242.png)

## Localização

O componente Icon, se encontra dentro de WebCompoents conforme ilustrado abaixo:

![](https://gaianocode.com.br/wp-content/uploads/2024/02/icon2.png)

## Propriedades

### Basic

As propriedades básicas do componente Icon incluem o seu tipo, contendo como única opção Icon, além do conteúdo do texto que estará contido nele.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/icon3.png)

### Params

O componente Icon possui propriedades de parâmetros que incluem icon-class, class e box-size. A opção icon-class determina a forma do ícone, permitindo uma variedade de estilos ao preencher o campo. A partir dos sites [https://fontawesome.com/v5/search?o=r&m=free](https://fontawesome.com/v5/search?o=r&m=free) e [https://www.primefaces.org/showcase/icons.xhtml?jfwid=7f8f0](https://www.primefaces.org/showcase/icons.xhtml?jfwid=7f8f0), é possível acessar uma ampla seleção de ícones. Basta copiar as classes associadas aos ícones desejados e colá-las no campo icon-class dentro do nocode.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/icon4-1024x280.png)

Enquanto o parâmetro box-size, que define o tamanho do ícone e a propriedade class refere-se à classe do ícone.

![](https://gaianocode.com.br/wp-content/uploads/2024/02/icon5.png)