car-front icon

Car front: car, automobile, drive. 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="M1 12L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3.191 6L4.915 2.553C4.999 2.383 5.122 2.249 5.283 2.149C5.444 2.05 5.62 2 5.809 2L10.191 2C10.38 2 10.556 2.05 10.717 2.149C10.878 2.249 11.001 2.383 11.085 2.553L12.809 6L14 6C14.276 6 14.512 6.098 14.707 6.293C14.902 6.488 15 6.724 15 7L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L12 13C12.276 13 12.512 13.098 12.707 13.293C12.902 13.488 13 13.724 13 14C13 14.276 12.902 14.512 12.707 14.707C12.512 14.902 12.276 15 12 15C11.724 15 11.488 14.902 11.293 14.707C11.098 14.512 11 14.276 11 14C11 13.724 11.098 13.488 11.293 13.293C11.488 13.098 11.724 13 12 13L4 13C4.276 13 4.512 13.098 4.707 13.293C4.902 13.488 5 13.724 5 14C5 14.276 4.902 14.512 4.707 14.707C4.512 14.902 4.276 15 4 15C3.724 15 3.488 14.902 3.293 14.707C3.098 14.512 3 14.276 3 14C3 13.724 3.098 13.488 3.293 13.293C3.488 13.098 3.724 13 4 13L2 13C1.724 13 1.488 12.902 1.293 12.707C1.098 12.512 1 12.276 1 12ZM10.191 3L5.809 3L4.309 6L11.691 6L10.191 3ZM14 12L14 7L2 7L2 12L14 12ZM3.293 8.293C3.488 8.098 3.724 8 4 8C4.276 8 4.512 8.098 4.707 8.293C4.902 8.488 5 8.724 5 9C5 9.276 4.902 9.512 4.707 9.707C4.512 9.902 4.276 10 4 10C3.724 10 3.488 9.902 3.293 9.707C3.098 9.512 3 9.276 3 9C3 8.724 3.098 8.488 3.293 8.293ZM11.293 8.293C11.488 8.098 11.724 8 12 8C12.276 8 12.512 8.098 12.707 8.293C12.902 8.488 13 8.724 13 9C13 9.276 12.902 9.512 12.707 9.707C12.512 9.902 12.276 10 12 10C11.724 10 11.488 9.902 11.293 9.707C11.098 9.512 11 9.276 11 9C11 8.724 11.098 8.488 11.293 8.293Z"/></svg>

React

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

export function CarFrontIcon(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="M1 12L1 7C1 6.724 1.098 6.488 1.293 6.293C1.488 6.098 1.724 6 2 6L3.191 6L4.915 2.553C4.999 2.383 5.122 2.249 5.283 2.149C5.444 2.05 5.62 2 5.809 2L10.191 2C10.38 2 10.556 2.05 10.717 2.149C10.878 2.249 11.001 2.383 11.085 2.553L12.809 6L14 6C14.276 6 14.512 6.098 14.707 6.293C14.902 6.488 15 6.724 15 7L15 12C15 12.276 14.902 12.512 14.707 12.707C14.512 12.902 14.276 13 14 13L12 13C12.276 13 12.512 13.098 12.707 13.293C12.902 13.488 13 13.724 13 14C13 14.276 12.902 14.512 12.707 14.707C12.512 14.902 12.276 15 12 15C11.724 15 11.488 14.902 11.293 14.707C11.098 14.512 11 14.276 11 14C11 13.724 11.098 13.488 11.293 13.293C11.488 13.098 11.724 13 12 13L4 13C4.276 13 4.512 13.098 4.707 13.293C4.902 13.488 5 13.724 5 14C5 14.276 4.902 14.512 4.707 14.707C4.512 14.902 4.276 15 4 15C3.724 15 3.488 14.902 3.293 14.707C3.098 14.512 3 14.276 3 14C3 13.724 3.098 13.488 3.293 13.293C3.488 13.098 3.724 13 4 13L2 13C1.724 13 1.488 12.902 1.293 12.707C1.098 12.512 1 12.276 1 12ZM10.191 3L5.809 3L4.309 6L11.691 6L10.191 3ZM14 12L14 7L2 7L2 12L14 12ZM3.293 8.293C3.488 8.098 3.724 8 4 8C4.276 8 4.512 8.098 4.707 8.293C4.902 8.488 5 8.724 5 9C5 9.276 4.902 9.512 4.707 9.707C4.512 9.902 4.276 10 4 10C3.724 10 3.488 9.902 3.293 9.707C3.098 9.512 3 9.276 3 9C3 8.724 3.098 8.488 3.293 8.293ZM11.293 8.293C11.488 8.098 11.724 8 12 8C12.276 8 12.512 8.098 12.707 8.293C12.902 8.488 13 8.724 13 9C13 9.276 12.902 9.512 12.707 9.707C12.512 9.902 12.276 10 12 10C11.724 10 11.488 9.902 11.293 9.707C11.098 9.512 11 9.276 11 9C11 8.724 11.098 8.488 11.293 8.293Z" />
    </svg>
  );
}

Vue

Vue: see /icons/car-front.md

Svelte

Svelte: see /icons/car-front.md

HTML img

HTML img: see /icons/car-front.md

CSS

CSS: see /icons/car-front.md

Data URL

Data URL: see /icons/car-front.md

Sprite

Sprite: see /icons/car-front.md

SwiftUI

SwiftUI: see /icons/car-front.md

Compose

Compose: see /icons/car-front.md

Android XML

Android XML: see /icons/car-front.md

Flutter

Flutter: see /icons/car-front.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.

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

Meaning

Use it for

car, automobile, drive

Also fits

car: the front-view car convention (Material, Phosphor, Bootstrap); pick one view per product

Built from

variant of car

Tags

car, automobile, vehicle, drive, sedan, front, front-view, headlights, road, transport, parking

Category

Transportation

Component name

CarFrontIcon

History

2026-10-29 released in 0.2.0
2026-10-30 added

Since

version 0.2.0

Family 10

car car-alert car-clock car-crash car-lock car-plus car-unlock car-user police-car taxi

More transportation icons

ambulance anchor bike bus bus-side bus-stop cable-car car-battery caravan charging-station drone engine fire-truck forklift fuel helicopter · all transportation icons

For agents

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

car-front icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp