Vehicle Cab icon

Use the Vehicle Cab 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 { VehicleCab24Regular, VehicleCab24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VehicleCab24Regular aria-label="Vehicle Cab" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_vehicle_cab_24_regular.svg" width="24" height="24" alt="Vehicle Cab">

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="M8.00537 13C8.00537 13.5523 7.55766 14 7.00537 14C6.45309 14 6.00537 13.5523 6.00537 13C6.00537 12.4477 6.45309 12 7.00537 12C7.55766 12 8.00537 12.4477 8.00537 13ZM16.9998 14C17.552 14 17.9998 13.5523 17.9998 13C17.9998 12.4477 17.552 12 16.9998 12C16.4475 12 15.9998 12.4477 15.9998 13C15.9998 13.5523 16.4475 14 16.9998 14ZM9.48438 14.75C9.48438 14.3358 9.82016 14 10.2344 14H13.7188C14.133 14 14.4688 14.3358 14.4688 14.75C14.4688 15.1642 14.133 15.5 13.7188 15.5H10.2344C9.82016 15.5 9.48438 15.1642 9.48438 14.75ZM9.26562 1.99219C8.85141 1.99219 8.51562 2.32797 8.51562 2.74219V4.5H7.85159C6.42162 4.5 5.15966 5.43465 4.74277 6.8025L4.68258 7H3.75C3.33579 7 3 7.33579 3 7.75C3 8.16421 3.33579 8.5 3.75 8.5H4.28302L4.08121 9.327C3.43291 9.72189 3 10.4354 3 11.25V19.75C3 20.7165 3.7835 21.5 4.75 21.5H6.25C7.2165 21.5 8 20.7165 8 19.75V18.5H16V19.75C16 20.7165 16.7835 21.5 17.75 21.5H19.25C20.2165 21.5 21 20.7165 21 19.75V11.25C21 10.4347 20.5663 9.72063 19.9171 9.32596L19.7106 8.5H20.25C20.6642 8.5 21 8.16421 21 7.75C21 7.33579 20.6642 7 20.25 7H19.308L19.2529 6.81612C18.8404 5.44142 17.5751 4.5 16.1399 4.5H15.5V2.74219C15.5 2.32797 15.1642 1.99219 14.75 1.99219H9.26562ZM14 4.5H10.0156V3.49219H14V4.5ZM7.85159 6H16.1399C16.9127 6 17.5941 6.50692 17.8161 7.24714L18.0266 7.94881L18.2894 9H5.70503L5.96165 7.94839L6.17761 7.23981C6.40209 6.50327 7.08161 6 7.85159 6ZM4.5 17V11.25C4.5 10.8358 4.83579 10.5 5.25 10.5H18.75C19.1642 10.5 19.5 10.8358 19.5 11.25V17H4.5ZM4.5 19.75V18.5H6.5V19.75C6.5 19.8881 6.38807 20 6.25 20H4.75C4.61193 20 4.5 19.8881 4.5 19.75ZM19.5 18.5V19.75C19.5 19.8881 19.3881 20 19.25 20H17.75C17.6119 20 17.5 19.8881 17.5 19.75V18.5H19.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_cab_24_regular.svg";

Details

Keywords

travelridemapcommutedistanceeventvehiclecartruckautomobile