Fluent Icons

Vehicle Truck icon

Used to represent general cargo scenarios. The Vehicle Truck icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 3 sizes from 16 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_vehicle_truck_24_regular.svg

Vehicle Truck icon in React

npm install @fluentui/react-icons

import { VehicleTruck24Regular } from "@fluentui/react-icons";

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

Vehicle Truck icon in SVG

npm install @fluentui/svg-icons

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

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/vehicle_truck_24_regular.svg" width="24" height="24" alt="Vehicle Truck">

Vehicle Truck icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.VehicleTruck())" />

Vehicle Truck icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.vehicle_truck_24_regular)

Vehicle Truck icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF84A;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF84A;" FontSize="24" />

Vehicle Truck icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_vehicle_truck_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f84a";
  font-size: 24px;
}

Vehicle Truck icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_vehicle_truck_24_regular" />

// Kotlin
R.drawable.ic_fluent_vehicle_truck_24_regular

Vehicle Truck icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .vehicleTruck24Regular)

Vehicle Truck icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

Use the Vehicle Truck 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 { VehicleTruck24Regular, VehicleTruck24Filled } from "@fluentui/react-icons";

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

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

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

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="M9.00537 15C9.55766 15 10.0054 14.5523 10.0054 14C10.0054 13.4477 9.55766 13 9.00537 13C8.45309 13 8.00537 13.4477 8.00537 14C8.00537 14.5523 8.45309 15 9.00537 15ZM15.9998 14C15.9998 14.5523 15.552 15 14.9998 15C14.4475 15 13.9998 14.5523 13.9998 14C13.9998 13.4477 14.4475 13 14.9998 13C15.552 13 15.9998 13.4477 15.9998 14ZM10.75 15.5C10.3358 15.5 10 15.8358 10 16.25C10 16.6642 10.3358 17 10.75 17H13.25C13.6642 17 14 16.6642 14 16.25C14 15.8358 13.6642 15.5 13.25 15.5H10.75ZM3 5.25C3 4.00736 4.00736 3 5.25 3H18.75C19.9926 3 21 4.00736 21 5.25V18.75C21 19.1642 20.6642 19.5 20.25 19.5H18.5V20.25C18.5 21.2165 17.7165 22 16.75 22H15.25C14.2835 22 13.5 21.2165 13.5 20.25V19.5H10.5V20.25C10.5 21.2165 9.7165 22 8.75 22H7.25C6.2835 22 5.5 21.2165 5.5 20.25V19.5H3.75C3.33579 19.5 3 19.1642 3 18.75V5.25ZM9 20.25V19.5H7V20.25C7 20.3881 7.11193 20.5 7.25 20.5H8.75C8.88807 20.5 9 20.3881 9 20.25ZM7 18H17V12H7V18ZM15 19.5V20.25C15 20.3881 15.1119 20.5 15.25 20.5H16.75C16.8881 20.5 17 20.3881 17 20.25V19.5H15ZM19.5 18V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V18H5.5V11.25C5.5 11.1953 5.50599 11.1407 5.51786 11.0873L6.25684 7.76191C6.48561 6.73245 7.39869 6 8.45326 6H15.5467C16.6013 6 17.5144 6.73245 17.7432 7.76191L18.4821 11.0873C18.494 11.1407 18.5 11.1953 18.5 11.25V18H19.5ZM8.45326 7.5C8.10173 7.5 7.79737 7.74415 7.72112 8.0873L7.18496 10.5H16.815L16.2789 8.0873C16.2026 7.74415 15.8983 7.5 15.5467 7.5H8.45326Z" fill="currentColor"/></svg>

Details

NameVehicle Truck
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px
Regular (outlined) fileic_fluent_vehicle_truck_24_regular.svg
Filled fileic_fluent_vehicle_truck_24_filled.svg
React (Regular)VehicleTruck16Regular, VehicleTruck20Regular, VehicleTruck24Regular
React (Filled)VehicleTruck16Filled, VehicleTruck20Filled, VehicleTruck24Filled
LicenseMIT (© Microsoft Corporation)

Keywords

travelridemapcommutetruckcargo

Related icons

Vehicle Truck BagVehicle Truck CubeVehicle Truck ProfileVehicle TrailerVehicle Trailer Arrow DownVehicle BusVehicle CabVehicle CarVehicle Car CollisionVehicle Car ProfileVehicle Car Profile LTR ClockVehicle Ship