Vehicle Car Collision icon

Use the Vehicle Car Collision icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { VehicleCarCollision24Regular, VehicleCarCollision24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VehicleCarCollision24Regular aria-label="Vehicle Car Collision" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_vehicle_car_collision_24_regular.svg" width="24" height="24" alt="Vehicle Car Collision">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5085 2.03999C11.8125 1.93658 12.1487 2.03822 12.3445 2.29276L14.4242 4.99644L17.3444 3.11916C17.612 2.94714 17.959 2.96264 18.2102 3.15783C18.4614 3.35302 18.5621 3.68543 18.4615 3.98722L17.2906 7.50005H21.25C21.5533 7.50005 21.8268 7.68278 21.9429 7.96303C22.059 8.24329 21.9948 8.56588 21.7803 8.78038L19.7296 10.8311L21.8603 13.8141C22.0236 14.0427 22.0454 14.3434 21.9169 14.5932C21.7883 14.843 21.5309 15 21.25 15H18.25C17.8358 15 17.5 14.6643 17.5 14.25C17.5 13.8358 17.8358 13.5 18.25 13.5H19.7926L18.1397 11.186C17.9266 10.8876 17.9604 10.479 18.2197 10.2197L19.4393 9.00005H16.25C16.0089 9.00005 15.7825 8.88416 15.6416 8.68858C15.5006 8.493 15.4623 8.24159 15.5385 8.01288L16.3656 5.53165L14.6556 6.63093C14.3277 6.84167 13.8931 6.76623 13.6555 6.45733L12.5 4.95514V7.25005C12.5 7.66426 12.1642 8.00005 11.75 8.00005C11.3358 8.00005 11 7.66426 11 7.25005V2.75005C11 2.42891 11.2045 2.1434 11.5085 2.03999ZM12 17.5C12.5523 17.5 13 17.0523 13 16.5C13 15.9478 12.5523 15.5 12 15.5C11.4477 15.5 11 15.9478 11 16.5C11 17.0523 11.4477 17.5 12 17.5ZM7 16.5C7 17.0523 6.55228 17.5 6 17.5C5.44772 17.5 5 17.0523 5 16.5C5 15.9478 5.44772 15.5 6 15.5C6.55228 15.5 7 15.9478 7 16.5ZM15.1375 13.75H15.25C15.6642 13.75 16 13.4143 16 13C16 12.5858 15.6642 12.25 15.25 12.25H14.6481L14.2617 10.7043C14.0112 9.70271 13.1113 9.00005 12.0788 9.00005H5.99489C4.91216 9.00005 3.98296 9.77121 3.78343 10.8354L3.51818 12.25H2.75C2.33579 12.25 2 12.5858 2 13C2 13.4143 2.33579 13.75 2.75 13.75H2.86253C2.33144 14.2514 2 14.962 2 15.75V20.5C2 21.3285 2.67157 22 3.5 22C4.32843 22 5 21.3285 5 20.5V20H13V20.5C13 21.3285 13.6716 22 14.5 22C15.3284 22 16 21.3285 16 20.5V15.75C16 14.962 15.6686 14.2514 15.1375 13.75ZM5.99489 10.5H12.0788C12.423 10.5 12.723 10.7343 12.8064 11.0681L13.2595 12.8804C13.2532 12.9193 13.25 12.9593 13.25 13H4.90369L5.25774 11.1118C5.32425 10.7571 5.63398 10.5 5.99489 10.5ZM14.5 18.5H3.5V15.75C3.5 15.0597 4.05964 14.5 4.75 14.5H13.25C13.9404 14.5 14.5 15.0597 14.5 15.75V18.5Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/vehicle_car_collision_24_regular.svg";

Details

Keywords

travelridemapcommutedistanceeventvehiclecartruckautomobile