Gentleface › Weather › air-quality

air-quality icon

Air quality: air quality, aqi, indoor air quality, air quality index. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Code line-round

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8.707 4.707C8.902 4.512 9 4.276 9 4C9 3.724 8.902 3.488 8.707 3.293C8.512 3.098 8.276 3 8 3C7.791 3 7.6 3.06 7.429 3.179C7.257 3.299 7.135 3.457 7.062 3.653C7.014 3.783 6.928 3.876 6.802 3.934C6.677 3.992 6.549 3.996 6.42 3.949C6.29 3.901 6.197 3.814 6.139 3.689C6.081 3.563 6.076 3.436 6.124 3.306C6.269 2.914 6.514 2.598 6.857 2.359C7.201 2.12 7.582 2 8 2C8.254 2 8.5 2.047 8.736 2.14C8.993 2.242 9.219 2.391 9.414 2.586C9.609 2.781 9.758 3.007 9.86 3.264C9.953 3.5 10 3.746 10 4C10 4.254 9.953 4.5 9.86 4.736C9.758 4.993 9.609 5.219 9.414 5.414C9.219 5.609 8.993 5.758 8.736 5.86C8.5 5.953 8.254 6 8 6L3.5 6C3.359 6 3.241 5.952 3.144 5.856C3.048 5.759 3 5.641 3 5.5C3 5.359 3.048 5.241 3.144 5.144C3.241 5.048 3.359 5 3.5 5L8 5C8.276 5 8.512 4.902 8.707 4.707ZM1.144 8.856C1.048 8.759 1 8.641 1 8.5C1 8.359 1.048 8.241 1.144 8.144C1.241 8.048 1.359 8 1.5 8L13 8C13.276 8 13.512 7.902 13.707 7.707C13.902 7.512 14 7.276 14 7C14 6.724 13.902 6.488 13.707 6.293C13.512 6.098 13.276 6 13 6C12.791 6 12.6 6.06 12.429 6.179C12.257 6.299 12.135 6.457 12.062 6.653C12.014 6.783 11.928 6.876 11.802 6.934C11.677 6.992 11.549 6.996 11.42 6.949C11.29 6.901 11.197 6.814 11.139 6.689C11.081 6.563 11.076 6.436 11.124 6.306C11.269 5.914 11.514 5.598 11.857 5.359C12.201 5.12 12.582 5 13 5C13.254 5 13.5 5.047 13.736 5.14C13.993 5.242 14.219 5.391 14.414 5.586C14.609 5.781 14.758 6.007 14.86 6.264C14.953 6.5 15 6.746 15 7C15 7.254 14.953 7.5 14.86 7.736C14.758 7.993 14.609 8.219 14.414 8.414C14.219 8.609 13.993 8.758 13.736 8.86C13.5 8.953 13.254 9 13 9L1.5 9C1.359 9 1.241 8.952 1.144 8.856ZM2.293 11.293C2.488 11.098 2.724 11 3 11C3.276 11 3.512 11.098 3.707 11.293C3.902 11.488 4 11.724 4 12C4 12.276 3.902 12.512 3.707 12.707C3.512 12.902 3.276 13 3 13C2.724 13 2.488 12.902 2.293 12.707C2.098 12.512 2 12.276 2 12C2 11.724 2.098 11.488 2.293 11.293ZM10.293 11.293C10.488 11.098 10.724 11 11 11C11.276 11 11.512 11.098 11.707 11.293C11.902 11.488 12 11.724 12 12C12 12.276 11.902 12.512 11.707 12.707C11.512 12.902 11.276 13 11 13C10.724 13 10.488 12.902 10.293 12.707C10.098 12.512 10 12.276 10 12C10 11.724 10.098 11.488 10.293 11.293ZM7.707 12.293C7.902 12.488 8 12.724 8 13C8 13.276 7.902 13.512 7.707 13.707C7.512 13.902 7.276 14 7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13C6 12.724 6.098 12.488 6.293 12.293C6.488 12.098 6.724 12 7 12C7.276 12 7.512 12.098 7.707 12.293Z"/></svg>

React

// Gentleface "air-quality" (line-round), MIT. https://gentleface.com/icons/air-quality
import type { SVGProps } from 'react';

export function AirQualityIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" {...props}>
      <path d="M8.707 4.707C8.902 4.512 9 4.276 9 4C9 3.724 8.902 3.488 8.707 3.293C8.512 3.098 8.276 3 8 3C7.791 3 7.6 3.06 7.429 3.179C7.257 3.299 7.135 3.457 7.062 3.653C7.014 3.783 6.928 3.876 6.802 3.934C6.677 3.992 6.549 3.996 6.42 3.949C6.29 3.901 6.197 3.814 6.139 3.689C6.081 3.563 6.076 3.436 6.124 3.306C6.269 2.914 6.514 2.598 6.857 2.359C7.201 2.12 7.582 2 8 2C8.254 2 8.5 2.047 8.736 2.14C8.993 2.242 9.219 2.391 9.414 2.586C9.609 2.781 9.758 3.007 9.86 3.264C9.953 3.5 10 3.746 10 4C10 4.254 9.953 4.5 9.86 4.736C9.758 4.993 9.609 5.219 9.414 5.414C9.219 5.609 8.993 5.758 8.736 5.86C8.5 5.953 8.254 6 8 6L3.5 6C3.359 6 3.241 5.952 3.144 5.856C3.048 5.759 3 5.641 3 5.5C3 5.359 3.048 5.241 3.144 5.144C3.241 5.048 3.359 5 3.5 5L8 5C8.276 5 8.512 4.902 8.707 4.707ZM1.144 8.856C1.048 8.759 1 8.641 1 8.5C1 8.359 1.048 8.241 1.144 8.144C1.241 8.048 1.359 8 1.5 8L13 8C13.276 8 13.512 7.902 13.707 7.707C13.902 7.512 14 7.276 14 7C14 6.724 13.902 6.488 13.707 6.293C13.512 6.098 13.276 6 13 6C12.791 6 12.6 6.06 12.429 6.179C12.257 6.299 12.135 6.457 12.062 6.653C12.014 6.783 11.928 6.876 11.802 6.934C11.677 6.992 11.549 6.996 11.42 6.949C11.29 6.901 11.197 6.814 11.139 6.689C11.081 6.563 11.076 6.436 11.124 6.306C11.269 5.914 11.514 5.598 11.857 5.359C12.201 5.12 12.582 5 13 5C13.254 5 13.5 5.047 13.736 5.14C13.993 5.242 14.219 5.391 14.414 5.586C14.609 5.781 14.758 6.007 14.86 6.264C14.953 6.5 15 6.746 15 7C15 7.254 14.953 7.5 14.86 7.736C14.758 7.993 14.609 8.219 14.414 8.414C14.219 8.609 13.993 8.758 13.736 8.86C13.5 8.953 13.254 9 13 9L1.5 9C1.359 9 1.241 8.952 1.144 8.856ZM2.293 11.293C2.488 11.098 2.724 11 3 11C3.276 11 3.512 11.098 3.707 11.293C3.902 11.488 4 11.724 4 12C4 12.276 3.902 12.512 3.707 12.707C3.512 12.902 3.276 13 3 13C2.724 13 2.488 12.902 2.293 12.707C2.098 12.512 2 12.276 2 12C2 11.724 2.098 11.488 2.293 11.293ZM10.293 11.293C10.488 11.098 10.724 11 11 11C11.276 11 11.512 11.098 11.707 11.293C11.902 11.488 12 11.724 12 12C12 12.276 11.902 12.512 11.707 12.707C11.512 12.902 11.276 13 11 13C10.724 13 10.488 12.902 10.293 12.707C10.098 12.512 10 12.276 10 12C10 11.724 10.098 11.488 10.293 11.293ZM7.707 12.293C7.902 12.488 8 12.724 8 13C8 13.276 7.902 13.512 7.707 13.707C7.512 13.902 7.276 14 7 14C6.724 14 6.488 13.902 6.293 13.707C6.098 13.512 6 13.276 6 13C6 12.724 6.098 12.488 6.293 12.293C6.488 12.098 6.724 12 7 12C7.276 12 7.512 12.098 7.707 12.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/air-quality.md

Svelte

Svelte: see /icons/air-quality.md

HTML img

HTML img: see /icons/air-quality.md

CSS

CSS: see /icons/air-quality.md

Data URL

Data URL: see /icons/air-quality.md

Sprite

Sprite: see /icons/air-quality.md

SwiftUI

SwiftUI: see /icons/air-quality.md

Compose

Compose: see /icons/air-quality.md

Android XML

Android XML: see /icons/air-quality.md

Flutter

Flutter: see /icons/air-quality.md

Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. More in how to use.

Meaning

Use it for

air quality, aqi, indoor air quality, air quality index, air pollution

Alternatives

haze: smog or haze as a weather condition
air-purifier: the air purifier appliance

Also fits

air purifier: the air-quality reading (AQI), not the appliance
haze: the air-quality reading (AQI)
air: the air-quality reading

Tags

air, quality, aqi, pollution, particles, dust, sensor, ventilation

Category

Weather

Component name

AirQualityIcon

History

2026-10-15 added

Family 16

haze hurricane moon moon-star rainbow snowflake sun sun-dim sunrise sunset thermometer thermometer-snowflake

More weather icons

cloud-fog cloud-hail cloud-lightning cloud-moon cloud-rain cloud-rain-heavy cloud-snow cloud-sun clouds droplet droplet-alert droplet-off · all weather icons

For agents

Metadata: /icons/air-quality.json · Markdown: /icons/air-quality.md · SVG: https://gentleface.com/svg/{style}/16/air-quality.svg · PNG: https://gentleface.com/png/{style}/{16|32|48}/air-quality.png

air-quality icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp