# car-front icon

Car front. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/car-front

- Category: Transportation
- Use it for: car, automobile, drive
- Built from: variant of car
- Tags: car, automobile, vehicle, drive, sedan, front, front-view, headlights, road, transport, parking
- Family: car, car-alert, car-clock, car-crash, car-lock, car-plus, car-unlock, car-user, police-car, taxi
- Component name: CarFrontIcon
- Added: 2026-10-29
- Since: version 0.2.0
- npm: `import { CarFrontIcon } from '@gentleface/react';` (@gentleface/react 0.2.0)
- Changed: 2026-10-30 (added)

## Also fits

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

## Files

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.

- line-round: https://gentleface.com/svg/line-round/16/car-front.svg · PNG https://gentleface.com/png/line-round/16/car-front.png · https://gentleface.com/png/line-round/32/car-front.png · https://gentleface.com/png/line-round/48/car-front.png
- line-soft: https://gentleface.com/svg/line-soft/16/car-front.svg · PNG https://gentleface.com/png/line-soft/16/car-front.png · https://gentleface.com/png/line-soft/32/car-front.png · https://gentleface.com/png/line-soft/48/car-front.png
- line-sharp: https://gentleface.com/svg/line-sharp/16/car-front.svg · PNG https://gentleface.com/png/line-sharp/16/car-front.png · https://gentleface.com/png/line-sharp/32/car-front.png · https://gentleface.com/png/line-sharp/48/car-front.png
- solid-round: https://gentleface.com/svg/solid-round/16/car-front.svg · PNG https://gentleface.com/png/solid-round/16/car-front.png · https://gentleface.com/png/solid-round/32/car-front.png · https://gentleface.com/png/solid-round/48/car-front.png
- solid-soft: https://gentleface.com/svg/solid-soft/16/car-front.svg · PNG https://gentleface.com/png/solid-soft/16/car-front.png · https://gentleface.com/png/solid-soft/32/car-front.png · https://gentleface.com/png/solid-soft/48/car-front.png
- solid-sharp: https://gentleface.com/svg/solid-sharp/16/car-front.svg · PNG https://gentleface.com/png/solid-sharp/16/car-front.png · https://gentleface.com/png/solid-sharp/32/car-front.png · https://gentleface.com/png/solid-sharp/48/car-front.png

The SVG of every style: https://gentleface.com/icons/car-front.json (`svg`).

## Code (line-round)

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. For another style, take its SVG from the JSON and swap the path `d`.

### SVG

```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

```tsx
// 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
<!-- Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front -->
<template>
  <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>
</template>
```

### Svelte

```svelte
<!-- Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front -->
<script>
  let props = $props();
</script>

<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>
```

### HTML img

```html
<!-- Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front. An <img> can't take currentColor: it draws black. Inline the SVG or use the CSS mask to color it. -->
<img src="https://gentleface.com/svg/line-round/16/car-front.svg" width="16" height="16" alt="">
```

### CSS

```css
/* Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front. Takes the text color. */
.icon-car-front {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
```

### Data URL

```text
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath 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'/%3E%3C/svg%3E
```

### Sprite

```html
<!-- Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front
     Every icon of this style in one file: https://gentleface.com/sprite/line-round.svg
     Serve it from your own origin: <use> does not load from another origin. -->
<svg width="16" height="16" aria-hidden="true"><use href="/sprite/line-round.svg#car-front"/></svg>
```

### SwiftUI

```swift
// Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front
import SwiftUI

struct CarFrontIcon: Shape {
    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: 1, y: 12))
        p.addLine(to: CGPoint(x: 1, y: 7))
        p.addCurve(to: CGPoint(x: 1.293, y: 6.293), control1: CGPoint(x: 1, y: 6.724), control2: CGPoint(x: 1.098, y: 6.488))
        p.addCurve(to: CGPoint(x: 2, y: 6), control1: CGPoint(x: 1.488, y: 6.098), control2: CGPoint(x: 1.724, y: 6))
        p.addLine(to: CGPoint(x: 3.191, y: 6))
        p.addLine(to: CGPoint(x: 4.915, y: 2.553))
        p.addCurve(to: CGPoint(x: 5.283, y: 2.149), control1: CGPoint(x: 4.999, y: 2.383), control2: CGPoint(x: 5.122, y: 2.249))
        p.addCurve(to: CGPoint(x: 5.809, y: 2), control1: CGPoint(x: 5.444, y: 2.05), control2: CGPoint(x: 5.62, y: 2))
        p.addLine(to: CGPoint(x: 10.191, y: 2))
        p.addCurve(to: CGPoint(x: 10.717, y: 2.149), control1: CGPoint(x: 10.38, y: 2), control2: CGPoint(x: 10.556, y: 2.05))
        p.addCurve(to: CGPoint(x: 11.085, y: 2.553), control1: CGPoint(x: 10.878, y: 2.249), control2: CGPoint(x: 11.001, y: 2.383))
        p.addLine(to: CGPoint(x: 12.809, y: 6))
        p.addLine(to: CGPoint(x: 14, y: 6))
        p.addCurve(to: CGPoint(x: 14.707, y: 6.293), control1: CGPoint(x: 14.276, y: 6), control2: CGPoint(x: 14.512, y: 6.098))
        p.addCurve(to: CGPoint(x: 15, y: 7), control1: CGPoint(x: 14.902, y: 6.488), control2: CGPoint(x: 15, y: 6.724))
        p.addLine(to: CGPoint(x: 15, y: 12))
        p.addCurve(to: CGPoint(x: 14.707, y: 12.707), control1: CGPoint(x: 15, y: 12.276), control2: CGPoint(x: 14.902, y: 12.512))
        p.addCurve(to: CGPoint(x: 14, y: 13), control1: CGPoint(x: 14.512, y: 12.902), control2: CGPoint(x: 14.276, y: 13))
        p.addLine(to: CGPoint(x: 12, y: 13))
        p.addCurve(to: CGPoint(x: 12.707, y: 13.293), control1: CGPoint(x: 12.276, y: 13), control2: CGPoint(x: 12.512, y: 13.098))
        p.addCurve(to: CGPoint(x: 13, y: 14), control1: CGPoint(x: 12.902, y: 13.488), control2: CGPoint(x: 13, y: 13.724))
        p.addCurve(to: CGPoint(x: 12.707, y: 14.707), control1: CGPoint(x: 13, y: 14.276), control2: CGPoint(x: 12.902, y: 14.512))
        p.addCurve(to: CGPoint(x: 12, y: 15), control1: CGPoint(x: 12.512, y: 14.902), control2: CGPoint(x: 12.276, y: 15))
        p.addCurve(to: CGPoint(x: 11.293, y: 14.707), control1: CGPoint(x: 11.724, y: 15), control2: CGPoint(x: 11.488, y: 14.902))
        p.addCurve(to: CGPoint(x: 11, y: 14), control1: CGPoint(x: 11.098, y: 14.512), control2: CGPoint(x: 11, y: 14.276))
        p.addCurve(to: CGPoint(x: 11.293, y: 13.293), control1: CGPoint(x: 11, y: 13.724), control2: CGPoint(x: 11.098, y: 13.488))
        p.addCurve(to: CGPoint(x: 12, y: 13), control1: CGPoint(x: 11.488, y: 13.098), control2: CGPoint(x: 11.724, y: 13))
        p.addLine(to: CGPoint(x: 4, y: 13))
        p.addCurve(to: CGPoint(x: 4.707, y: 13.293), control1: CGPoint(x: 4.276, y: 13), control2: CGPoint(x: 4.512, y: 13.098))
        p.addCurve(to: CGPoint(x: 5, y: 14), control1: CGPoint(x: 4.902, y: 13.488), control2: CGPoint(x: 5, y: 13.724))
        p.addCurve(to: CGPoint(x: 4.707, y: 14.707), control1: CGPoint(x: 5, y: 14.276), control2: CGPoint(x: 4.902, y: 14.512))
        p.addCurve(to: CGPoint(x: 4, y: 15), control1: CGPoint(x: 4.512, y: 14.902), control2: CGPoint(x: 4.276, y: 15))
        p.addCurve(to: CGPoint(x: 3.293, y: 14.707), control1: CGPoint(x: 3.724, y: 15), control2: CGPoint(x: 3.488, y: 14.902))
        p.addCurve(to: CGPoint(x: 3, y: 14), control1: CGPoint(x: 3.098, y: 14.512), control2: CGPoint(x: 3, y: 14.276))
        p.addCurve(to: CGPoint(x: 3.293, y: 13.293), control1: CGPoint(x: 3, y: 13.724), control2: CGPoint(x: 3.098, y: 13.488))
        p.addCurve(to: CGPoint(x: 4, y: 13), control1: CGPoint(x: 3.488, y: 13.098), control2: CGPoint(x: 3.724, y: 13))
        p.addLine(to: CGPoint(x: 2, y: 13))
        p.addCurve(to: CGPoint(x: 1.293, y: 12.707), control1: CGPoint(x: 1.724, y: 13), control2: CGPoint(x: 1.488, y: 12.902))
        p.addCurve(to: CGPoint(x: 1, y: 12), control1: CGPoint(x: 1.098, y: 12.512), control2: CGPoint(x: 1, y: 12.276))
        p.closeSubpath()
        p.move(to: CGPoint(x: 10.191, y: 3))
        p.addLine(to: CGPoint(x: 5.809, y: 3))
        p.addLine(to: CGPoint(x: 4.309, y: 6))
        p.addLine(to: CGPoint(x: 11.691, y: 6))
        p.addLine(to: CGPoint(x: 10.191, y: 3))
        p.closeSubpath()
        p.move(to: CGPoint(x: 14, y: 12))
        p.addLine(to: CGPoint(x: 14, y: 7))
        p.addLine(to: CGPoint(x: 2, y: 7))
        p.addLine(to: CGPoint(x: 2, y: 12))
        p.addLine(to: CGPoint(x: 14, y: 12))
        p.closeSubpath()
        p.move(to: CGPoint(x: 3.293, y: 8.293))
        p.addCurve(to: CGPoint(x: 4, y: 8), control1: CGPoint(x: 3.488, y: 8.098), control2: CGPoint(x: 3.724, y: 8))
        p.addCurve(to: CGPoint(x: 4.707, y: 8.293), control1: CGPoint(x: 4.276, y: 8), control2: CGPoint(x: 4.512, y: 8.098))
        p.addCurve(to: CGPoint(x: 5, y: 9), control1: CGPoint(x: 4.902, y: 8.488), control2: CGPoint(x: 5, y: 8.724))
        p.addCurve(to: CGPoint(x: 4.707, y: 9.707), control1: CGPoint(x: 5, y: 9.276), control2: CGPoint(x: 4.902, y: 9.512))
        p.addCurve(to: CGPoint(x: 4, y: 10), control1: CGPoint(x: 4.512, y: 9.902), control2: CGPoint(x: 4.276, y: 10))
        p.addCurve(to: CGPoint(x: 3.293, y: 9.707), control1: CGPoint(x: 3.724, y: 10), control2: CGPoint(x: 3.488, y: 9.902))
        p.addCurve(to: CGPoint(x: 3, y: 9), control1: CGPoint(x: 3.098, y: 9.512), control2: CGPoint(x: 3, y: 9.276))
        p.addCurve(to: CGPoint(x: 3.293, y: 8.293), control1: CGPoint(x: 3, y: 8.724), control2: CGPoint(x: 3.098, y: 8.488))
        p.closeSubpath()
        p.move(to: CGPoint(x: 11.293, y: 8.293))
        p.addCurve(to: CGPoint(x: 12, y: 8), control1: CGPoint(x: 11.488, y: 8.098), control2: CGPoint(x: 11.724, y: 8))
        p.addCurve(to: CGPoint(x: 12.707, y: 8.293), control1: CGPoint(x: 12.276, y: 8), control2: CGPoint(x: 12.512, y: 8.098))
        p.addCurve(to: CGPoint(x: 13, y: 9), control1: CGPoint(x: 12.902, y: 8.488), control2: CGPoint(x: 13, y: 8.724))
        p.addCurve(to: CGPoint(x: 12.707, y: 9.707), control1: CGPoint(x: 13, y: 9.276), control2: CGPoint(x: 12.902, y: 9.512))
        p.addCurve(to: CGPoint(x: 12, y: 10), control1: CGPoint(x: 12.512, y: 9.902), control2: CGPoint(x: 12.276, y: 10))
        p.addCurve(to: CGPoint(x: 11.293, y: 9.707), control1: CGPoint(x: 11.724, y: 10), control2: CGPoint(x: 11.488, y: 9.902))
        p.addCurve(to: CGPoint(x: 11, y: 9), control1: CGPoint(x: 11.098, y: 9.512), control2: CGPoint(x: 11, y: 9.276))
        p.addCurve(to: CGPoint(x: 11.293, y: 8.293), control1: CGPoint(x: 11, y: 8.724), control2: CGPoint(x: 11.098, y: 8.488))
        p.closeSubpath()
        return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16))
    }
}

// CarFrontIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp.
```

### Compose

```kotlin
// Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.addPathNodes
import androidx.compose.ui.unit.dp

val CarFrontIcon: ImageVector by lazy {
    ImageVector.Builder(
        name = "car-front", defaultWidth = 16.dp, defaultHeight = 16.dp,
        viewportWidth = 16f, viewportHeight = 16f,
    ).addPath(
        pathData = addPathNodes("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"),
        fill = SolidColor(Color.Black),
    ).build()
}

// Icon(CarFrontIcon, contentDescription = null) tints it with LocalContentColor.
```

### Android XML

```xml
<!-- res/drawable/ic_car_front.xml · Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="16dp"
    android:height="16dp"
    android:viewportWidth="16"
    android:viewportHeight="16"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="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"/>
</vector>
```

### Flutter

```dart
// Gentleface "car-front" (line-round), MIT. https://gentleface.com/icons/car-front
import 'package:flutter/widgets.dart';

class CarFrontIcon extends StatelessWidget {
  const CarFrontIcon({super.key, this.size = 16, this.color});
  final double size;
  final Color? color;

  @override
  Widget build(BuildContext context) => CustomPaint(
        size: Size.square(size),
        painter: _CarFrontIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)),
      );
}

class _CarFrontIconPainter extends CustomPainter {
  _CarFrontIconPainter(this.color);
  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.scale(size.width / 16, size.height / 16);
    final p = Path()
      ..moveTo(1, 12)
      ..lineTo(1, 7)
      ..cubicTo(1, 6.724, 1.098, 6.488, 1.293, 6.293)
      ..cubicTo(1.488, 6.098, 1.724, 6, 2, 6)
      ..lineTo(3.191, 6)
      ..lineTo(4.915, 2.553)
      ..cubicTo(4.999, 2.383, 5.122, 2.249, 5.283, 2.149)
      ..cubicTo(5.444, 2.05, 5.62, 2, 5.809, 2)
      ..lineTo(10.191, 2)
      ..cubicTo(10.38, 2, 10.556, 2.05, 10.717, 2.149)
      ..cubicTo(10.878, 2.249, 11.001, 2.383, 11.085, 2.553)
      ..lineTo(12.809, 6)
      ..lineTo(14, 6)
      ..cubicTo(14.276, 6, 14.512, 6.098, 14.707, 6.293)
      ..cubicTo(14.902, 6.488, 15, 6.724, 15, 7)
      ..lineTo(15, 12)
      ..cubicTo(15, 12.276, 14.902, 12.512, 14.707, 12.707)
      ..cubicTo(14.512, 12.902, 14.276, 13, 14, 13)
      ..lineTo(12, 13)
      ..cubicTo(12.276, 13, 12.512, 13.098, 12.707, 13.293)
      ..cubicTo(12.902, 13.488, 13, 13.724, 13, 14)
      ..cubicTo(13, 14.276, 12.902, 14.512, 12.707, 14.707)
      ..cubicTo(12.512, 14.902, 12.276, 15, 12, 15)
      ..cubicTo(11.724, 15, 11.488, 14.902, 11.293, 14.707)
      ..cubicTo(11.098, 14.512, 11, 14.276, 11, 14)
      ..cubicTo(11, 13.724, 11.098, 13.488, 11.293, 13.293)
      ..cubicTo(11.488, 13.098, 11.724, 13, 12, 13)
      ..lineTo(4, 13)
      ..cubicTo(4.276, 13, 4.512, 13.098, 4.707, 13.293)
      ..cubicTo(4.902, 13.488, 5, 13.724, 5, 14)
      ..cubicTo(5, 14.276, 4.902, 14.512, 4.707, 14.707)
      ..cubicTo(4.512, 14.902, 4.276, 15, 4, 15)
      ..cubicTo(3.724, 15, 3.488, 14.902, 3.293, 14.707)
      ..cubicTo(3.098, 14.512, 3, 14.276, 3, 14)
      ..cubicTo(3, 13.724, 3.098, 13.488, 3.293, 13.293)
      ..cubicTo(3.488, 13.098, 3.724, 13, 4, 13)
      ..lineTo(2, 13)
      ..cubicTo(1.724, 13, 1.488, 12.902, 1.293, 12.707)
      ..cubicTo(1.098, 12.512, 1, 12.276, 1, 12)
      ..close()
      ..moveTo(10.191, 3)
      ..lineTo(5.809, 3)
      ..lineTo(4.309, 6)
      ..lineTo(11.691, 6)
      ..lineTo(10.191, 3)
      ..close()
      ..moveTo(14, 12)
      ..lineTo(14, 7)
      ..lineTo(2, 7)
      ..lineTo(2, 12)
      ..lineTo(14, 12)
      ..close()
      ..moveTo(3.293, 8.293)
      ..cubicTo(3.488, 8.098, 3.724, 8, 4, 8)
      ..cubicTo(4.276, 8, 4.512, 8.098, 4.707, 8.293)
      ..cubicTo(4.902, 8.488, 5, 8.724, 5, 9)
      ..cubicTo(5, 9.276, 4.902, 9.512, 4.707, 9.707)
      ..cubicTo(4.512, 9.902, 4.276, 10, 4, 10)
      ..cubicTo(3.724, 10, 3.488, 9.902, 3.293, 9.707)
      ..cubicTo(3.098, 9.512, 3, 9.276, 3, 9)
      ..cubicTo(3, 8.724, 3.098, 8.488, 3.293, 8.293)
      ..close()
      ..moveTo(11.293, 8.293)
      ..cubicTo(11.488, 8.098, 11.724, 8, 12, 8)
      ..cubicTo(12.276, 8, 12.512, 8.098, 12.707, 8.293)
      ..cubicTo(12.902, 8.488, 13, 8.724, 13, 9)
      ..cubicTo(13, 9.276, 12.902, 9.512, 12.707, 9.707)
      ..cubicTo(12.512, 9.902, 12.276, 10, 12, 10)
      ..cubicTo(11.724, 10, 11.488, 9.902, 11.293, 9.707)
      ..cubicTo(11.098, 9.512, 11, 9.276, 11, 9)
      ..cubicTo(11, 8.724, 11.098, 8.488, 11.293, 8.293)
      ..close();
    canvas.drawPath(p, Paint()..color = color);
  }

  @override
  bool shouldRepaint(_CarFrontIconPainter old) => old.color != color;
}
```