Gentleface › Home & household › air-vent

air-vent icon

Air vent: air vent, air conditioning, ac, air conditioner. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated air-vent-blow · line-round

The louvre swings down to open the outlet. Air blows out in two gusts, each line running down and off its end and drawing again from the unit, the middle one first, then the louvre closes.

Download SVG

Native SVG animation, with no CSS or script. It loops by itself. Inline it to take the text color: in an <img> it draws black. To play it once on hover or click, run 0.2 s to 2.65 s. Examples and helper.

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="M13.86 5.736C13.758 5.993 13.609 6.219 13.414 6.414C13.219 6.609 12.993 6.758 12.736 6.86C12.5 6.953 12.254 7 12 7L3 7C2.746 7 2.5 6.953 2.264 6.86C2.007 6.758 1.781 6.609 1.586 6.414C1.391 6.219 1.242 5.993 1.14 5.736C1.047 5.5 1 5.254 1 5L1 3C1 2.746 1.047 2.5 1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1L12 1C12.254 1 12.5 1.047 12.736 1.14C12.993 1.242 13.219 1.391 13.414 1.586C13.609 1.781 13.758 2.007 13.86 2.264C13.953 2.5 14 2.746 14 3L14 5C14 5.254 13.953 5.5 13.86 5.736ZM2.293 5.707C2.488 5.902 2.724 6 3 6L12 6C12.276 6 12.512 5.902 12.707 5.707C12.902 5.512 13 5.276 13 5L13 3C13 2.724 12.902 2.488 12.707 2.293C12.512 2.098 12.276 2 12 2L3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 5C2 5.276 2.098 5.512 2.293 5.707ZM4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L10.5 4C10.641 4 10.759 4.048 10.856 4.144C10.952 4.241 11 4.359 11 4.5C11 4.641 10.952 4.759 10.856 4.856C10.759 4.952 10.641 5 10.5 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856ZM4.86 13.736C4.758 13.993 4.609 14.219 4.414 14.414C4.219 14.609 3.993 14.758 3.736 14.86C3.5 14.953 3.254 15 3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13C1 12.582 1.12 12.201 1.359 11.857C1.598 11.514 1.914 11.269 2.306 11.124C2.438 11.075 2.566 11.079 2.69 11.136C2.813 11.193 2.9 11.288 2.949 11.42C2.996 11.549 2.992 11.677 2.934 11.802C2.876 11.928 2.783 12.014 2.653 12.062C2.457 12.135 2.299 12.257 2.179 12.429C2.06 12.6 2 12.791 2 13C2 13.276 2.098 13.512 2.293 13.707C2.488 13.902 2.724 14 3 14C3.276 14 3.512 13.902 3.707 13.707C3.902 13.512 4 13.276 4 13L4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8C4.641 8 4.759 8.048 4.856 8.144C4.952 8.241 5 8.359 5 8.5L5 13C5 13.254 4.953 13.5 4.86 13.736ZM7.144 8.144C7.241 8.048 7.359 8 7.5 8C7.641 8 7.759 8.048 7.856 8.144C7.952 8.241 8 8.359 8 8.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.359 14 7.241 13.952 7.144 13.856C7.048 13.759 7 13.641 7 13.5L7 8.5C7 8.359 7.048 8.241 7.144 8.144ZM11.293 13.707C11.488 13.902 11.724 14 12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13C13 12.791 12.94 12.6 12.821 12.429C12.701 12.257 12.543 12.135 12.347 12.062C12.217 12.014 12.124 11.928 12.066 11.802C12.008 11.677 12.004 11.549 12.051 11.42C12.099 11.29 12.186 11.197 12.311 11.139C12.437 11.081 12.564 11.076 12.694 11.124C13.086 11.269 13.402 11.514 13.641 11.857C13.88 12.201 14 12.582 14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15C11.746 15 11.5 14.953 11.264 14.86C11.007 14.758 10.781 14.609 10.586 14.414C10.391 14.219 10.242 13.993 10.14 13.736C10.047 13.5 10 13.254 10 13L10 8.5C10 8.359 10.048 8.241 10.144 8.144C10.241 8.048 10.359 8 10.5 8C10.641 8 10.759 8.048 10.856 8.144C10.952 8.241 11 8.359 11 8.5L11 13C11 13.276 11.098 13.512 11.293 13.707Z"/></svg>

React

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

export function AirVentIcon(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="M13.86 5.736C13.758 5.993 13.609 6.219 13.414 6.414C13.219 6.609 12.993 6.758 12.736 6.86C12.5 6.953 12.254 7 12 7L3 7C2.746 7 2.5 6.953 2.264 6.86C2.007 6.758 1.781 6.609 1.586 6.414C1.391 6.219 1.242 5.993 1.14 5.736C1.047 5.5 1 5.254 1 5L1 3C1 2.746 1.047 2.5 1.14 2.264C1.242 2.007 1.391 1.781 1.586 1.586C1.781 1.391 2.007 1.242 2.264 1.14C2.5 1.047 2.746 1 3 1L12 1C12.254 1 12.5 1.047 12.736 1.14C12.993 1.242 13.219 1.391 13.414 1.586C13.609 1.781 13.758 2.007 13.86 2.264C13.953 2.5 14 2.746 14 3L14 5C14 5.254 13.953 5.5 13.86 5.736ZM2.293 5.707C2.488 5.902 2.724 6 3 6L12 6C12.276 6 12.512 5.902 12.707 5.707C12.902 5.512 13 5.276 13 5L13 3C13 2.724 12.902 2.488 12.707 2.293C12.512 2.098 12.276 2 12 2L3 2C2.724 2 2.488 2.098 2.293 2.293C2.098 2.488 2 2.724 2 3L2 5C2 5.276 2.098 5.512 2.293 5.707ZM4.144 4.856C4.048 4.759 4 4.641 4 4.5C4 4.359 4.048 4.241 4.144 4.144C4.241 4.048 4.359 4 4.5 4L10.5 4C10.641 4 10.759 4.048 10.856 4.144C10.952 4.241 11 4.359 11 4.5C11 4.641 10.952 4.759 10.856 4.856C10.759 4.952 10.641 5 10.5 5L4.5 5C4.359 5 4.241 4.952 4.144 4.856ZM4.86 13.736C4.758 13.993 4.609 14.219 4.414 14.414C4.219 14.609 3.993 14.758 3.736 14.86C3.5 14.953 3.254 15 3 15C2.746 15 2.5 14.953 2.264 14.86C2.007 14.758 1.781 14.609 1.586 14.414C1.391 14.219 1.242 13.993 1.14 13.736C1.047 13.5 1 13.254 1 13C1 12.582 1.12 12.201 1.359 11.857C1.598 11.514 1.914 11.269 2.306 11.124C2.438 11.075 2.566 11.079 2.69 11.136C2.813 11.193 2.9 11.288 2.949 11.42C2.996 11.549 2.992 11.677 2.934 11.802C2.876 11.928 2.783 12.014 2.653 12.062C2.457 12.135 2.299 12.257 2.179 12.429C2.06 12.6 2 12.791 2 13C2 13.276 2.098 13.512 2.293 13.707C2.488 13.902 2.724 14 3 14C3.276 14 3.512 13.902 3.707 13.707C3.902 13.512 4 13.276 4 13L4 8.5C4 8.359 4.048 8.241 4.144 8.144C4.241 8.048 4.359 8 4.5 8C4.641 8 4.759 8.048 4.856 8.144C4.952 8.241 5 8.359 5 8.5L5 13C5 13.254 4.953 13.5 4.86 13.736ZM7.144 8.144C7.241 8.048 7.359 8 7.5 8C7.641 8 7.759 8.048 7.856 8.144C7.952 8.241 8 8.359 8 8.5L8 13.5C8 13.641 7.952 13.759 7.856 13.856C7.759 13.952 7.641 14 7.5 14C7.359 14 7.241 13.952 7.144 13.856C7.048 13.759 7 13.641 7 13.5L7 8.5C7 8.359 7.048 8.241 7.144 8.144ZM11.293 13.707C11.488 13.902 11.724 14 12 14C12.276 14 12.512 13.902 12.707 13.707C12.902 13.512 13 13.276 13 13C13 12.791 12.94 12.6 12.821 12.429C12.701 12.257 12.543 12.135 12.347 12.062C12.217 12.014 12.124 11.928 12.066 11.802C12.008 11.677 12.004 11.549 12.051 11.42C12.099 11.29 12.186 11.197 12.311 11.139C12.437 11.081 12.564 11.076 12.694 11.124C13.086 11.269 13.402 11.514 13.641 11.857C13.88 12.201 14 12.582 14 13C14 13.254 13.953 13.5 13.86 13.736C13.758 13.993 13.609 14.219 13.414 14.414C13.219 14.609 12.993 14.758 12.736 14.86C12.5 14.953 12.254 15 12 15C11.746 15 11.5 14.953 11.264 14.86C11.007 14.758 10.781 14.609 10.586 14.414C10.391 14.219 10.242 13.993 10.14 13.736C10.047 13.5 10 13.254 10 13L10 8.5C10 8.359 10.048 8.241 10.144 8.144C10.241 8.048 10.359 8 10.5 8C10.641 8 10.759 8.048 10.856 8.144C10.952 8.241 11 8.359 11 8.5L11 13C11 13.276 11.098 13.512 11.293 13.707Z" />
    </svg>
  );
}

Vue

Vue: see /icons/air-vent.md

Svelte

Svelte: see /icons/air-vent.md

HTML img

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

CSS

CSS: see /icons/air-vent.md

Data URL

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

Sprite

Sprite: see /icons/air-vent.md

SwiftUI

SwiftUI: see /icons/air-vent.md

Compose

Compose: see /icons/air-vent.md

Android XML

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

Flutter

Flutter: see /icons/air-vent.md

Each icon is drawn on the 16 px grid, and most also on the 20 and 24 px grids (at 24 in three weights: light 1 px, regular 1.5 px, bold 2 px). Show the drawing made for your size, or an exact multiple of it, on whole pixels: 16 for 16 and 32 px, 20 for 20 and 40, 24 for 24 and 48. A size in between or a fractional position blurs it. The code on each icon page is the 16 px drawing, an SVG with fill="currentColor"; the icon page's downloads follow its Grid switch, and npm has the 20 and 24 px drawings too. 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.

With npm: import { AirVentIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

air vent, air conditioning, ac, air conditioner, aircon, ac unit

Alternatives

snowflake: the cool mode on a thermostat or an AC remote (Material ac_unit)
fan: a fan or ventilation without cooling
thermostat: setting the target temperature (climate control)

Also fits

fan: air conditioning
thermostat: air conditioning
air: air conditioning

Tags

air-vent, air-conditioning, ac, air-conditioner, aircon, ac-unit, split-unit, hvac, cooling, ventilation, airflow, climate

Category

Home & household

Component name

AirVentIcon

History

2026-11-06 20 px drawn, 24 px drawn, added, released in 0.4.0

Since

version 0.4.0

More home & household icons

air-freshener air-purifier armchair baby-changing bath bed bed-double bed-off bed-person bed-plus bed-single blender blinds broom broom-sparkle bucket · all home & household icons

For agents

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

air-vent icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp