Gentleface › Transportation › tire-winter

tire-winter icon

Tire winter: winter tire, snow tire, off road tire, all terrain tire. Drawn on the 16 px grid. Free SVG, PNG and code, MIT licensed.

Animated tire-winter-spin · line-round

The tyre spins up and digs in, throwing snow off its tread behind it in short sprays. It slows down and stops with the tread and spokes back where they were.

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.3 s to 2.4 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="M6.93 2.075L6.676 1.125C7.109 1.042 7.551 1 8 1C8.449 1 8.891 1.042 9.324 1.125L9.07 2.075L10.036 2.334L10.29 1.385C10.386 1.418 10.482 1.454 10.577 1.491C11.319 1.785 11.988 2.191 12.584 2.709L11.889 3.404L12.596 4.111L13.291 3.416C13.809 4.012 14.215 4.681 14.509 5.423C14.546 5.518 14.582 5.614 14.615 5.71L13.666 5.964L13.925 6.93L14.875 6.676C14.958 7.109 15 7.551 15 8C15 8.449 14.958 8.891 14.875 9.324L13.925 9.07L13.666 10.036L14.615 10.29C14.582 10.386 14.546 10.482 14.509 10.577C14.215 11.319 13.809 11.988 13.291 12.584L12.596 11.889L11.889 12.596L12.584 13.291C11.988 13.809 11.319 14.215 10.577 14.509C10.482 14.546 10.386 14.582 10.29 14.615L10.036 13.666L9.07 13.925L9.324 14.875C8.891 14.958 8.449 15 8 15C7.551 15 7.109 14.958 6.676 14.875L6.93 13.925L5.964 13.666L5.71 14.615C5.614 14.582 5.518 14.546 5.423 14.509C4.681 14.215 4.012 13.809 3.416 13.291L4.111 12.596L3.404 11.889L2.709 12.584C2.191 11.988 1.785 11.319 1.491 10.577C1.454 10.482 1.418 10.386 1.385 10.29L2.334 10.036L2.075 9.07L1.125 9.324C1.042 8.891 1 8.449 1 8C1 7.551 1.042 7.109 1.125 6.676L2.075 6.93L2.334 5.964L1.385 5.71C1.418 5.614 1.454 5.518 1.491 5.423C1.785 4.681 2.191 4.012 2.709 3.416L3.404 4.111L4.111 3.404L3.416 2.709C4.012 2.191 4.681 1.785 5.423 1.491C5.518 1.454 5.614 1.418 5.71 1.385L5.964 2.334L6.93 2.075ZM12 8C12 5.791 10.209 4 8 4C5.791 4 4 5.791 4 8C4 10.209 5.791 12 8 12C10.209 12 12 10.209 12 8ZM5.341 6.611C5.776 5.779 6.575 5.198 7.5 5.042L7.5 7.134C7.439 7.169 7.383 7.21 7.331 7.257L5.341 6.611ZM10.659 6.611L8.669 7.257C8.617 7.21 8.561 7.169 8.5 7.134L8.5 5.042C9.425 5.198 10.224 5.779 10.659 6.611ZM5.032 7.562L7.022 8.208C7.036 8.276 7.058 8.343 7.087 8.407L5.857 10.099C5.308 9.539 5 8.785 5 8C5 7.853 5.011 7.707 5.032 7.562ZM10.143 10.099L8.913 8.407C8.942 8.343 8.964 8.276 8.978 8.208L10.968 7.562C10.989 7.707 11 7.853 11 8C11 8.785 10.692 9.539 10.143 10.099ZM6.666 10.687L7.896 8.995C7.93 8.998 7.965 9 8 9C8.035 9 8.07 8.998 8.104 8.995L9.334 10.687C8.919 10.893 8.463 11 8 11C7.537 11 7.081 10.893 6.666 10.687Z"/></svg>

React

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

export function TireWinterIcon(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="M6.93 2.075L6.676 1.125C7.109 1.042 7.551 1 8 1C8.449 1 8.891 1.042 9.324 1.125L9.07 2.075L10.036 2.334L10.29 1.385C10.386 1.418 10.482 1.454 10.577 1.491C11.319 1.785 11.988 2.191 12.584 2.709L11.889 3.404L12.596 4.111L13.291 3.416C13.809 4.012 14.215 4.681 14.509 5.423C14.546 5.518 14.582 5.614 14.615 5.71L13.666 5.964L13.925 6.93L14.875 6.676C14.958 7.109 15 7.551 15 8C15 8.449 14.958 8.891 14.875 9.324L13.925 9.07L13.666 10.036L14.615 10.29C14.582 10.386 14.546 10.482 14.509 10.577C14.215 11.319 13.809 11.988 13.291 12.584L12.596 11.889L11.889 12.596L12.584 13.291C11.988 13.809 11.319 14.215 10.577 14.509C10.482 14.546 10.386 14.582 10.29 14.615L10.036 13.666L9.07 13.925L9.324 14.875C8.891 14.958 8.449 15 8 15C7.551 15 7.109 14.958 6.676 14.875L6.93 13.925L5.964 13.666L5.71 14.615C5.614 14.582 5.518 14.546 5.423 14.509C4.681 14.215 4.012 13.809 3.416 13.291L4.111 12.596L3.404 11.889L2.709 12.584C2.191 11.988 1.785 11.319 1.491 10.577C1.454 10.482 1.418 10.386 1.385 10.29L2.334 10.036L2.075 9.07L1.125 9.324C1.042 8.891 1 8.449 1 8C1 7.551 1.042 7.109 1.125 6.676L2.075 6.93L2.334 5.964L1.385 5.71C1.418 5.614 1.454 5.518 1.491 5.423C1.785 4.681 2.191 4.012 2.709 3.416L3.404 4.111L4.111 3.404L3.416 2.709C4.012 2.191 4.681 1.785 5.423 1.491C5.518 1.454 5.614 1.418 5.71 1.385L5.964 2.334L6.93 2.075ZM12 8C12 5.791 10.209 4 8 4C5.791 4 4 5.791 4 8C4 10.209 5.791 12 8 12C10.209 12 12 10.209 12 8ZM5.341 6.611C5.776 5.779 6.575 5.198 7.5 5.042L7.5 7.134C7.439 7.169 7.383 7.21 7.331 7.257L5.341 6.611ZM10.659 6.611L8.669 7.257C8.617 7.21 8.561 7.169 8.5 7.134L8.5 5.042C9.425 5.198 10.224 5.779 10.659 6.611ZM5.032 7.562L7.022 8.208C7.036 8.276 7.058 8.343 7.087 8.407L5.857 10.099C5.308 9.539 5 8.785 5 8C5 7.853 5.011 7.707 5.032 7.562ZM10.143 10.099L8.913 8.407C8.942 8.343 8.964 8.276 8.978 8.208L10.968 7.562C10.989 7.707 11 7.853 11 8C11 8.785 10.692 9.539 10.143 10.099ZM6.666 10.687L7.896 8.995C7.93 8.998 7.965 9 8 9C8.035 9 8.07 8.998 8.104 8.995L9.334 10.687C8.919 10.893 8.463 11 8 11C7.537 11 7.081 10.893 6.666 10.687Z" />
    </svg>
  );
}

Vue

Vue: see /icons/tire-winter.md

Svelte

Svelte: see /icons/tire-winter.md

HTML img

HTML img: see /icons/tire-winter.md

CSS

CSS: see /icons/tire-winter.md

Data URL

Data URL: see /icons/tire-winter.md

Sprite

Sprite: see /icons/tire-winter.md

SwiftUI

SwiftUI: see /icons/tire-winter.md

Compose

Compose: see /icons/tire-winter.md

Android XML

Android XML: see /icons/tire-winter.md

Flutter

Flutter: see /icons/tire-winter.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 { TireWinterIcon } from '@gentleface/react'; (setup).

Meaning

Use it for

winter tire, snow tire, off road tire, all terrain tire

Example

Winter or off-road tyre option in a car-service or rental app

Tags

tire, tyre, winter, snow, off-road, all-terrain, tread, studded, wheel, rubber, car, seasonal tire

Category

Transportation

Component name

TireWinterIcon

History

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

Since

version 0.4.0

More transportation icons

ambulance anchor barricade bike bike-bolt bike-off boom-barrier bus bus-alert bus-clock bus-off bus-side bus-stop cable-car car car-alert · all transportation icons

For agents

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

tire-winter icon Copy name

line-round

line-soft

line-sharp

solid-round

solid-soft

solid-sharp