# Ícones

> Ícones que representam as condições climáticas atuais e previsões do tempo.

Os ícones da **HG Weather** representam visualmente as condições climáticas retornadas pela API. Cada condição possui um código numérico (`condition_code`) e um identificador textual (`condition_slug`) que corresponde ao nome do arquivo de ícone.

## Como usar os ícones

Para exibir o ícone correspondente à condição climática, utilize o valor do campo `condition_slug` retornado pela API:

```text
https://assets.hgbrasil.com/weather/icons/conditions/{condition_slug}.svg
```

### Exemplo de uso

Se a API retornar `"condition_slug": "rain"`, você utilizaria o seguinte link para acessar o ícone:

```text
https://assets.hgbrasil.com/weather/icons/conditions/rain.svg
```

### Download dos ícones

Você também pode baixar todos os ícones das condições climáticas.

<u-button href="https://assets.hgbrasil.com/weather/icons/hg-brasil-conditions-slugs.zip" icon="tabler:download" label="Fazer download" target="_blank">



</u-button>

## Condições climáticas e seus ícones

Os ícones disponíveis representam uma variedade de condições climáticas, desde sol e chuva até tempestades e neve. Abaixo está uma tabela com os códigos, slugs, ícones e descrições correspondentes.

<table>
<thead>
  <tr>
    <th>
      <code>
        condition_code
      </code>
    </th>
    
    <th>
      <code>
        condition_slug
      </code>
    </th>
    
    <th>
      Ícone
    </th>
    
    <th>
      Descrição
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      0
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Tempestade forte
    </td>
  </tr>
  
  <tr>
    <td>
      1
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Tempestade tropical
    </td>
  </tr>
  
  <tr>
    <td>
      2
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Furacão
    </td>
  </tr>
  
  <tr>
    <td>
      3
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Tempestades severas
    </td>
  </tr>
  
  <tr>
    <td>
      4
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Tempestades
    </td>
  </tr>
  
  <tr>
    <td>
      5
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Misto de neve e chuva
    </td>
  </tr>
  
  <tr>
    <td>
      6
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Misto chuva e gelo
    </td>
  </tr>
  
  <tr>
    <td>
      7
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Misto neve e gelo
    </td>
  </tr>
  
  <tr>
    <td>
      8
    </td>
    
    <td>
      <code>
        fog
      </code>
    </td>
    
    <td>
      <img alt="fog" src="https://assets.hgbrasil.com/weather/icons/conditions/fog.svg" />
    </td>
    
    <td>
      Geada fina
    </td>
  </tr>
  
  <tr>
    <td>
      9
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Chuviscos
    </td>
  </tr>
  
  <tr>
    <td>
      10
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Congelamento chuva
    </td>
  </tr>
  
  <tr>
    <td>
      11
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Alguns chuviscos
    </td>
  </tr>
  
  <tr>
    <td>
      12
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Alguns chuviscos
    </td>
  </tr>
  
  <tr>
    <td>
      13
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Neve baixa
    </td>
  </tr>
  
  <tr>
    <td>
      14
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Tempestade com neve
    </td>
  </tr>
  
  <tr>
    <td>
      15
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Ventania com neve
    </td>
  </tr>
  
  <tr>
    <td>
      16
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Neve
    </td>
  </tr>
  
  <tr>
    <td>
      17
    </td>
    
    <td>
      <code>
        hail
      </code>
    </td>
    
    <td>
      <img alt="hail" src="https://assets.hgbrasil.com/weather/icons/conditions/hail.svg" />
    </td>
    
    <td>
      Granizo
    </td>
  </tr>
  
  <tr>
    <td>
      18
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Gelo
    </td>
  </tr>
  
  <tr>
    <td>
      19
    </td>
    
    <td>
      <code>
        fog
      </code>
    </td>
    
    <td>
      <img alt="fog" src="https://assets.hgbrasil.com/weather/icons/conditions/fog.svg" />
    </td>
    
    <td>
      Poeira
    </td>
  </tr>
  
  <tr>
    <td>
      20
    </td>
    
    <td>
      <code>
        fog
      </code>
    </td>
    
    <td>
      <img alt="fog" src="https://assets.hgbrasil.com/weather/icons/conditions/fog.svg" />
    </td>
    
    <td>
      Neblina
    </td>
  </tr>
  
  <tr>
    <td>
      21
    </td>
    
    <td>
      <code>
        fog
      </code>
    </td>
    
    <td>
      <img alt="fog" src="https://assets.hgbrasil.com/weather/icons/conditions/fog.svg" />
    </td>
    
    <td>
      Tempestade de areia
    </td>
  </tr>
  
  <tr>
    <td>
      22
    </td>
    
    <td>
      <code>
        fog
      </code>
    </td>
    
    <td>
      <img alt="fog" src="https://assets.hgbrasil.com/weather/icons/conditions/fog.svg" />
    </td>
    
    <td>
      Fumacento
    </td>
  </tr>
  
  <tr>
    <td>
      23
    </td>
    
    <td>
      <code>
        cloud
      </code>
    </td>
    
    <td>
      <img alt="cloud" src="https://assets.hgbrasil.com/weather/icons/conditions/cloud.svg" />
    </td>
    
    <td>
      Vento acentuado
    </td>
  </tr>
  
  <tr>
    <td>
      24
    </td>
    
    <td>
      <code>
        cloud
      </code>
    </td>
    
    <td>
      <img alt="cloud" src="https://assets.hgbrasil.com/weather/icons/conditions/cloud.svg" />
    </td>
    
    <td>
      Ventania
    </td>
  </tr>
  
  <tr>
    <td>
      25
    </td>
    
    <td>
      <code>
        cloud
      </code>
    </td>
    
    <td>
      <img alt="cloud" src="https://assets.hgbrasil.com/weather/icons/conditions/cloud.svg" />
    </td>
    
    <td>
      Tempo frio
    </td>
  </tr>
  
  <tr>
    <td>
      26
    </td>
    
    <td>
      <code>
        cloud
      </code>
    </td>
    
    <td>
      <img alt="cloud" src="https://assets.hgbrasil.com/weather/icons/conditions/cloud.svg" />
    </td>
    
    <td>
      Tempo nublado
    </td>
  </tr>
  
  <tr>
    <td>
      27
    </td>
    
    <td>
      <code>
        clear_night
      </code>
    </td>
    
    <td>
      <img alt="clear_night" src="https://assets.hgbrasil.com/weather/icons/conditions/clear_night.svg" />
    </td>
    
    <td>
      Tempo limpo
    </td>
  </tr>
  
  <tr>
    <td>
      28
    </td>
    
    <td>
      <code>
        cloudly_day
      </code>
    </td>
    
    <td>
      <img alt="cloudly_day" src="https://assets.hgbrasil.com/weather/icons/conditions/cloudly_day.svg" />
    </td>
    
    <td>
      Tempo nublado
    </td>
  </tr>
  
  <tr>
    <td>
      29
    </td>
    
    <td>
      <code>
        cloudly_night
      </code>
    </td>
    
    <td>
      <img alt="cloudly_night" src="https://assets.hgbrasil.com/weather/icons/conditions/cloudly_night.svg" />
    </td>
    
    <td>
      Parcialmente nublado
    </td>
  </tr>
  
  <tr>
    <td>
      30
    </td>
    
    <td>
      <code>
        cloudly_day
      </code>
    </td>
    
    <td>
      <img alt="cloudly_day" src="https://assets.hgbrasil.com/weather/icons/conditions/cloudly_day.svg" />
    </td>
    
    <td>
      Parcialmente nublado
    </td>
  </tr>
  
  <tr>
    <td>
      31
    </td>
    
    <td>
      <code>
        clear_night
      </code>
    </td>
    
    <td>
      <img alt="clear_night" src="https://assets.hgbrasil.com/weather/icons/conditions/clear_night.svg" />
    </td>
    
    <td>
      Tempo limpo
    </td>
  </tr>
  
  <tr>
    <td>
      32
    </td>
    
    <td>
      <code>
        clear_day
      </code>
    </td>
    
    <td>
      <img alt="clear_day" src="https://assets.hgbrasil.com/weather/icons/conditions/clear_day.svg" />
    </td>
    
    <td>
      Ensolarado
    </td>
  </tr>
  
  <tr>
    <td>
      33
    </td>
    
    <td>
      <code>
        clear_night
      </code>
    </td>
    
    <td>
      <img alt="clear_night" src="https://assets.hgbrasil.com/weather/icons/conditions/clear_night.svg" />
    </td>
    
    <td>
      Estrelado
    </td>
  </tr>
  
  <tr>
    <td>
      34
    </td>
    
    <td>
      <code>
        cloudly_day
      </code>
    </td>
    
    <td>
      <img alt="cloudly_day" src="https://assets.hgbrasil.com/weather/icons/conditions/cloudly_day.svg" />
    </td>
    
    <td>
      Ensolarado com muitas nuvens
    </td>
  </tr>
  
  <tr>
    <td>
      35
    </td>
    
    <td>
      <code>
        hail
      </code>
    </td>
    
    <td>
      <img alt="hail" src="https://assets.hgbrasil.com/weather/icons/conditions/hail.svg" />
    </td>
    
    <td>
      Misto chuva e granizo
    </td>
  </tr>
  
  <tr>
    <td>
      36
    </td>
    
    <td>
      <code>
        clear_day
      </code>
    </td>
    
    <td>
      <img alt="clear_day" src="https://assets.hgbrasil.com/weather/icons/conditions/clear_day.svg" />
    </td>
    
    <td>
      Ar quente
    </td>
  </tr>
  
  <tr>
    <td>
      37
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Tempestades isoladas
    </td>
  </tr>
  
  <tr>
    <td>
      38
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Trovoadas dispersas
    </td>
  </tr>
  
  <tr>
    <td>
      39
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Trovoadas dispersas
    </td>
  </tr>
  
  <tr>
    <td>
      40
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Chuvas esparsas
    </td>
  </tr>
  
  <tr>
    <td>
      41
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Pesados neve
    </td>
  </tr>
  
  <tr>
    <td>
      42
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Chuviscos com neve
    </td>
  </tr>
  
  <tr>
    <td>
      43
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Neve pesada
    </td>
  </tr>
  
  <tr>
    <td>
      44
    </td>
    
    <td>
      <code>
        cloudly_day
      </code>
    </td>
    
    <td>
      <img alt="cloudly_day" src="https://assets.hgbrasil.com/weather/icons/conditions/cloudly_day.svg" />
    </td>
    
    <td>
      Sol com poucas nuvens
    </td>
  </tr>
  
  <tr>
    <td>
      45
    </td>
    
    <td>
      <code>
        rain
      </code>
    </td>
    
    <td>
      <img alt="rain" src="https://assets.hgbrasil.com/weather/icons/conditions/rain.svg" />
    </td>
    
    <td>
      Chuva
    </td>
  </tr>
  
  <tr>
    <td>
      46
    </td>
    
    <td>
      <code>
        snow
      </code>
    </td>
    
    <td>
      <img alt="snow" src="https://assets.hgbrasil.com/weather/icons/conditions/snow.svg" />
    </td>
    
    <td>
      Queda de neve
    </td>
  </tr>
  
  <tr>
    <td>
      47
    </td>
    
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      <img alt="storm" src="https://assets.hgbrasil.com/weather/icons/conditions/storm.svg" />
    </td>
    
    <td>
      Tempestades isoladas
    </td>
  </tr>
  
  <tr>
    <td>
      48
    </td>
    
    <td>
      –
    </td>
    
    <td>
      –
    </td>
    
    <td>
      Serviço não disponível
    </td>
  </tr>
</tbody>
</table>

## Fases da Lua

A API do **HG Weather** também retorna informações sobre as fases da lua através do campo `moon_phase`. Assim como as condições climáticas, cada fase da lua possui um identificador textual que corresponde ao nome do arquivo de ícone.

### Fases disponíveis

<table>
<thead>
  <tr>
    <th align="center">
      <code>
        moon_phase
      </code>
    </th>
    
    <th align="center">
      Ícone
    </th>
    
    <th align="left">
      Descrição
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td align="center">
      <code>
        new
      </code>
    </td>
    
    <td align="center">
      <img alt="Lua nova" src="https://assets.hgbrasil.com/weather/icons/moon/new.png" />
    </td>
    
    <td align="left">
      Lua nova
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        waxing_crescent
      </code>
    </td>
    
    <td align="center">
      <img alt="Lua crescente" src="https://assets.hgbrasil.com/weather/icons/moon/waxing_crescent.png" />
    </td>
    
    <td align="left">
      Lua crescente
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        first_quarter
      </code>
    </td>
    
    <td align="center">
      <img alt="Quarto crescente" src="https://assets.hgbrasil.com/weather/icons/moon/first_quarter.png" />
    </td>
    
    <td align="left">
      Quarto crescente
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        waxing_gibbous
      </code>
    </td>
    
    <td align="center">
      <img alt="Gibosa crescente" src="https://assets.hgbrasil.com/weather/icons/moon/waxing_gibbous.png" />
    </td>
    
    <td align="left">
      Gibosa crescente
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        full
      </code>
    </td>
    
    <td align="center">
      <img alt="Lua cheia" src="https://assets.hgbrasil.com/weather/icons/moon/full.png" />
    </td>
    
    <td align="left">
      Lua cheia
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        waning_gibbous
      </code>
    </td>
    
    <td align="center">
      <img alt="Gibosa minguante" src="https://assets.hgbrasil.com/weather/icons/moon/waning_gibbous.png" />
    </td>
    
    <td align="left">
      Gibosa minguante
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        last_quarter
      </code>
    </td>
    
    <td align="center">
      <img alt="Quarto minguante" src="https://assets.hgbrasil.com/weather/icons/moon/last_quarter.png" />
    </td>
    
    <td align="left">
      Quarto minguante
    </td>
  </tr>
  
  <tr>
    <td align="center">
      <code>
        waning_crescent
      </code>
    </td>
    
    <td align="center">
      <img alt="Lua minguante" src="https://assets.hgbrasil.com/weather/icons/moon/waning_crescent.png" />
    </td>
    
    <td align="left">
      Lua minguante
    </td>
  </tr>
</tbody>
</table>

### Como usar os ícones das fases da lua

Para exibir o ícone correspondente à fase da lua, utilize o valor do campo `moon_phase` retornado pela API:

```text
https://assets.hgbrasil.com/weather/icons/moon/{moon_phase}.png
```

### Exemplo de uso

Se a API retornar `"moon_phase": "full"`, você pode acessar o ícone através da URL:

```text
https://assets.hgbrasil.com/weather/icons/moon/full.png
```

### Download dos ícones das fases da lua

Você também pode baixar todos os ícones das fases da lua.

<u-button href="https://assets.hgbrasil.com/weather/icons/hg-brasil-moon-phases.zip" icon="tabler:download" label="Fazer download" target="_blank">



</u-button>
