car front icon
car-front from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- car-front
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
The same icon in other sets
Related icons in Huge Icons
Use the car front icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 17.5v-1.867c0-1.24 0-1.86.147-2.453q.033-.13.072-.258c.179-.585.498-1.117 1.135-2.18c.07-.114.104-.172.13-.233l.011-.027c.025-.062.041-.127.074-.256l.295-1.181c.545-2.183.818-3.274 1.632-3.91C7.31 4.5 8.435 4.5 10.685 4.5h2.63c2.25 0 3.375 0 4.189.635c.814.636 1.086 1.727 1.632 3.91l.295 1.18a2 2 0 0 0 .085.284c.026.061.06.119.13.234c.637 1.062.956 1.594 1.135 2.179q.039.127.072.258c.147.593.147 1.213.147 2.453V17.5c0 .943 0 1.414-.293 1.707s-.764.293-1.707.293s-1.414 0-1.707-.293S17 18.443 17 17.5V17H7v.5c0 .943 0 1.414-.293 1.707S5.943 19.5 5 19.5s-1.414 0-1.707-.293S3 18.443 3 17.5M19 10l2-.5M5 10l-2-.5m2 .5h14M3.5 13.5H5m14 0h1.5M8 13.5h8"/></svg>
React
import type { SVGProps } from "react";
export function HugeiconsCarFront(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M3 17.5v-1.867c0-1.24 0-1.86.147-2.453q.033-.13.072-.258c.179-.585.498-1.117 1.135-2.18c.07-.114.104-.172.13-.233l.011-.027c.025-.062.041-.127.074-.256l.295-1.181c.545-2.183.818-3.274 1.632-3.91C7.31 4.5 8.435 4.5 10.685 4.5h2.63c2.25 0 3.375 0 4.189.635c.814.636 1.086 1.727 1.632 3.91l.295 1.18a2 2 0 0 0 .085.284c.026.061.06.119.13.234c.637 1.062.956 1.594 1.135 2.179q.039.127.072.258c.147.593.147 1.213.147 2.453V17.5c0 .943 0 1.414-.293 1.707s-.764.293-1.707.293s-1.414 0-1.707-.293S17 18.443 17 17.5V17H7v.5c0 .943 0 1.414-.293 1.707S5.943 19.5 5 19.5s-1.414 0-1.707-.293S3 18.443 3 17.5M19 10l2-.5M5 10l-2-.5m2 .5h14M3.5 13.5H5m14 0h1.5M8 13.5h8"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 17.5v-1.867c0-1.24 0-1.86.147-2.453q.033-.13.072-.258c.179-.585.498-1.117 1.135-2.18c.07-.114.104-.172.13-.233l.011-.027c.025-.062.041-.127.074-.256l.295-1.181c.545-2.183.818-3.274 1.632-3.91C7.31 4.5 8.435 4.5 10.685 4.5h2.63c2.25 0 3.375 0 4.189.635c.814.636 1.086 1.727 1.632 3.91l.295 1.18a2 2 0 0 0 .085.284c.026.061.06.119.13.234c.637 1.062.956 1.594 1.135 2.179q.039.127.072.258c.147.593.147 1.213.147 2.453V17.5c0 .943 0 1.414-.293 1.707s-.764.293-1.707.293s-1.414 0-1.707-.293S17 18.443 17 17.5V17H7v.5c0 .943 0 1.414-.293 1.707S5.943 19.5 5 19.5s-1.414 0-1.707-.293S3 18.443 3 17.5M19 10l2-.5M5 10l-2-.5m2 .5h14M3.5 13.5H5m14 0h1.5M8 13.5h8"/></svg> </template>
CSS
.icon-car-front {
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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M3%2017.5v-1.867c0-1.24%200-1.86.147-2.453q.033-.13.072-.258c.179-.585.498-1.117%201.135-2.18c.07-.114.104-.172.13-.233l.011-.027c.025-.062.041-.127.074-.256l.295-1.181c.545-2.183.818-3.274%201.632-3.91C7.31%204.5%208.435%204.5%2010.685%204.5h2.63c2.25%200%203.375%200%204.189.635c.814.636%201.086%201.727%201.632%203.91l.295%201.18a2%202%200%200%200%20.085.284c.026.061.06.119.13.234c.637%201.062.956%201.594%201.135%202.179q.039.127.072.258c.147.593.147%201.213.147%202.453V17.5c0%20.943%200%201.414-.293%201.707s-.764.293-1.707.293s-1.414%200-1.707-.293S17%2018.443%2017%2017.5V17H7v.5c0%20.943%200%201.414-.293%201.707S5.943%2019.5%205%2019.5s-1.414%200-1.707-.293S3%2018.443%203%2017.5M19%2010l2-.5M5%2010l-2-.5m2%20.5h14M3.5%2013.5H5m14%200h1.5M8%2013.5h8%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%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%20d%3D%22M3%2017.5v-1.867c0-1.24%200-1.86.147-2.453q.033-.13.072-.258c.179-.585.498-1.117%201.135-2.18c.07-.114.104-.172.13-.233l.011-.027c.025-.062.041-.127.074-.256l.295-1.181c.545-2.183.818-3.274%201.632-3.91C7.31%204.5%208.435%204.5%2010.685%204.5h2.63c2.25%200%203.375%200%204.189.635c.814.636%201.086%201.727%201.632%203.91l.295%201.18a2%202%200%200%200%20.085.284c.026.061.06.119.13.234c.637%201.062.956%201.594%201.135%202.179q.039.127.072.258c.147.593.147%201.213.147%202.453V17.5c0%20.943%200%201.414-.293%201.707s-.764.293-1.707.293s-1.414%200-1.707-.293S17%2018.443%2017%2017.5V17H7v.5c0%20.943%200%201.414-.293%201.707S5.943%2019.5%205%2019.5s-1.414%200-1.707-.293S3%2018.443%203%2017.5M19%2010l2-.5M5%2010l-2-.5m2%20.5h14M3.5%2013.5H5m14%200h1.5M8%2013.5h8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/car-front.svg?color=%231a73e8&size=48
