bus icon

bus from Font Awesome 6 Solid by Dave Gandy · Regular · Automotive · CC-BY-4.0 Attribution required.

Name
bus
Set
Font Awesome 6 Solid
Style
Regular
Category
Automotive
Viewbox
576×512
License
CC BY 4.0

The same icon in other sets

busBoxIcons v2busBoxIcons v2 SolidbusCarbonbusEmoji One (Colored)busFont Awesome SolidbusFluent EmojibusFluent Emoji FlatbusFluent Emoji High ContrastbusFirefox OS EmojibusIconParkbusIconPark OutlinebusIconPark SolidbusIconPark TwoTonebusIconoirbusIonIconsbusJam IconsbusLine AwesomebusLucidebusMajesticonsbusMaterial Design Iconsbus-fillMingCute IconbusNoto EmojibusOpenMojibusPhosphor

More automotive icons from Font Awesome 6 Solid

carcar-batterycar-sidecaravancharging-stationgas-pumpmotorcycleoil-cantaxitrailertrucktruck-monstertruck-pickupbus-simple

Use the bus icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c134.4 0 224 35.2 224 80v48c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32v160c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32H192v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32c-17.7 0-32-14.3-32-32V256c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32V80c0-44.8 89.6-80 224-80M128 160v96c0 17.7 14.3 32 32 32h112V128H160c-17.7 0-32 14.3-32 32m176 128h112c17.7 0 32-14.3 32-32v-96c0-17.7-14.3-32-32-32H304zM144 400a32 32 0 1 0 0-64a32 32 0 1 0 0 64m288 0a32 32 0 1 0 0-64a32 32 0 1 0 0 64M384 80c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16s7.2 16 16 16h160c8.8 0 16-7.2 16-16"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidBus(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c134.4 0 224 35.2 224 80v48c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32v160c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32H192v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32c-17.7 0-32-14.3-32-32V256c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32V80c0-44.8 89.6-80 224-80M128 160v96c0 17.7 14.3 32 32 32h112V128H160c-17.7 0-32 14.3-32 32m176 128h112c17.7 0 32-14.3 32-32v-96c0-17.7-14.3-32-32-32H304zM144 400a32 32 0 1 0 0-64a32 32 0 1 0 0 64m288 0a32 32 0 1 0 0-64a32 32 0 1 0 0 64M384 80c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16s7.2 16 16 16h160c8.8 0 16-7.2 16-16"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><path fill="currentColor" d="M288 0c134.4 0 224 35.2 224 80v48c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32v160c0 17.7-14.3 32-32 32v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32H192v32c0 17.7-14.3 32-32 32h-32c-17.7 0-32-14.3-32-32v-32c-17.7 0-32-14.3-32-32V256c-17.7 0-32-14.3-32-32v-64c0-17.7 14.3-32 32-32V80c0-44.8 89.6-80 224-80M128 160v96c0 17.7 14.3 32 32 32h112V128H160c-17.7 0-32 14.3-32 32m176 128h112c17.7 0 32-14.3 32-32v-96c0-17.7-14.3-32-32-32H304zM144 400a32 32 0 1 0 0-64a32 32 0 1 0 0 64m288 0a32 32 0 1 0 0-64a32 32 0 1 0 0 64M384 80c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16s7.2 16 16 16h160c8.8 0 16-7.2 16-16"/></svg>
</template>

CSS

.icon-bus {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%200c134.4%200%20224%2035.2%20224%2080v48c17.7%200%2032%2014.3%2032%2032v64c0%2017.7-14.3%2032-32%2032v160c0%2017.7-14.3%2032-32%2032v32c0%2017.7-14.3%2032-32%2032h-32c-17.7%200-32-14.3-32-32v-32H192v32c0%2017.7-14.3%2032-32%2032h-32c-17.7%200-32-14.3-32-32v-32c-17.7%200-32-14.3-32-32V256c-17.7%200-32-14.3-32-32v-64c0-17.7%2014.3-32%2032-32V80c0-44.8%2089.6-80%20224-80M128%20160v96c0%2017.7%2014.3%2032%2032%2032h112V128H160c-17.7%200-32%2014.3-32%2032m176%20128h112c17.7%200%2032-14.3%2032-32v-96c0-17.7-14.3-32-32-32H304zM144%20400a32%2032%200%201%200%200-64a32%2032%200%201%200%200%2064m288%200a32%2032%200%201%200%200-64a32%2032%200%201%200%200%2064M384%2080c0-8.8-7.2-16-16-16H208c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016h160c8.8%200%2016-7.2%2016-16%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20576%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288%200c134.4%200%20224%2035.2%20224%2080v48c17.7%200%2032%2014.3%2032%2032v64c0%2017.7-14.3%2032-32%2032v160c0%2017.7-14.3%2032-32%2032v32c0%2017.7-14.3%2032-32%2032h-32c-17.7%200-32-14.3-32-32v-32H192v32c0%2017.7-14.3%2032-32%2032h-32c-17.7%200-32-14.3-32-32v-32c-17.7%200-32-14.3-32-32V256c-17.7%200-32-14.3-32-32v-64c0-17.7%2014.3-32%2032-32V80c0-44.8%2089.6-80%20224-80M128%20160v96c0%2017.7%2014.3%2032%2032%2032h112V128H160c-17.7%200-32%2014.3-32%2032m176%20128h112c17.7%200%2032-14.3%2032-32v-96c0-17.7-14.3-32-32-32H304zM144%20400a32%2032%200%201%200%200-64a32%2032%200%201%200%200%2064m288%200a32%2032%200%201%200%200-64a32%2032%200%201%200%200%2064M384%2080c0-8.8-7.2-16-16-16H208c-8.8%200-16%207.2-16%2016s7.2%2016%2016%2016h160c8.8%200%2016-7.2%2016-16%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fa6-solid/bus.svg?color=%231a73e8&size=48