cargo ship icon
cargo-ship from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.
- Name
- cargo-ship
- Set
- Huge Icons
- Style
- Stroke
- Viewbox
- 24×24
- License
- MIT
Use the cargo ship icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M2 21.494c1.295.096 2.384-.994 3.333-.994s2.492 1.005 3.334.994c1.01.009 2.193-.994 3.333-.994s2.323 1.003 3.333.994c1.295.096 2.384-.994 3.334-.994s2.491 1.005 3.333.994M6 20.5c-1.418-1.766-2.417-4.027-2.843-5.225c-.135-.38-.202-.57-.124-.752c.079-.181.27-.266.655-.436l7.49-3.318c.404-.18.607-.269.822-.269s.418.09.823.27l7.489 3.317c.384.17.576.255.655.436c.078.182.01.372-.124.752c-.426 1.198-1.425 3.459-2.843 5.225"/><path d="m6 13l.216-2.807c.135-1.752.202-2.628.777-3.16c.575-.533 1.454-.533 3.211-.533h3.592c1.757 0 2.636 0 3.21.533c.576.532.643 1.408.778 3.16L18 13"/><path d="m8.5 6.5l.172-1.372c.156-1.251.234-1.877.66-2.253c.425-.375 1.055-.375 2.316-.375h.704c1.26 0 1.891 0 2.316.375c.426.376.504 1.002.66 2.253L15.5 6.5"/></g></svg>
React
import type { SVGProps } from "react";
export function HugeiconsCargoShip(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5"><path d="M2 21.494c1.295.096 2.384-.994 3.333-.994s2.492 1.005 3.334.994c1.01.009 2.193-.994 3.333-.994s2.323 1.003 3.333.994c1.295.096 2.384-.994 3.334-.994s2.491 1.005 3.333.994M6 20.5c-1.418-1.766-2.417-4.027-2.843-5.225c-.135-.38-.202-.57-.124-.752c.079-.181.27-.266.655-.436l7.49-3.318c.404-.18.607-.269.822-.269s.418.09.823.27l7.489 3.317c.384.17.576.255.655.436c.078.182.01.372-.124.752c-.426 1.198-1.425 3.459-2.843 5.225"/><path d="m6 13l.216-2.807c.135-1.752.202-2.628.777-3.16c.575-.533 1.454-.533 3.211-.533h3.592c1.757 0 2.636 0 3.21.533c.576.532.643 1.408.778 3.16L18 13"/><path d="m8.5 6.5l.172-1.372c.156-1.251.234-1.877.66-2.253c.425-.375 1.055-.375 2.316-.375h.704c1.26 0 1.891 0 2.316.375c.426.376.504 1.002.66 2.253L15.5 6.5"/></g></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="M2 21.494c1.295.096 2.384-.994 3.333-.994s2.492 1.005 3.334.994c1.01.009 2.193-.994 3.333-.994s2.323 1.003 3.333.994c1.295.096 2.384-.994 3.334-.994s2.491 1.005 3.333.994M6 20.5c-1.418-1.766-2.417-4.027-2.843-5.225c-.135-.38-.202-.57-.124-.752c.079-.181.27-.266.655-.436l7.49-3.318c.404-.18.607-.269.822-.269s.418.09.823.27l7.489 3.317c.384.17.576.255.655.436c.078.182.01.372-.124.752c-.426 1.198-1.425 3.459-2.843 5.225"/><path d="m6 13l.216-2.807c.135-1.752.202-2.628.777-3.16c.575-.533 1.454-.533 3.211-.533h3.592c1.757 0 2.636 0 3.21.533c.576.532.643 1.408.778 3.16L18 13"/><path d="m8.5 6.5l.172-1.372c.156-1.251.234-1.877.66-2.253c.425-.375 1.055-.375 2.316-.375h.704c1.26 0 1.891 0 2.316.375c.426.376.504 1.002.66 2.253L15.5 6.5"/></g></svg> </template>
CSS
.icon-cargo-ship {
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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M2%2021.494c1.295.096%202.384-.994%203.333-.994s2.492%201.005%203.334.994c1.01.009%202.193-.994%203.333-.994s2.323%201.003%203.333.994c1.295.096%202.384-.994%203.334-.994s2.491%201.005%203.333.994M6%2020.5c-1.418-1.766-2.417-4.027-2.843-5.225c-.135-.38-.202-.57-.124-.752c.079-.181.27-.266.655-.436l7.49-3.318c.404-.18.607-.269.822-.269s.418.09.823.27l7.489%203.317c.384.17.576.255.655.436c.078.182.01.372-.124.752c-.426%201.198-1.425%203.459-2.843%205.225%22%2F%3E%3Cpath%20d%3D%22m6%2013l.216-2.807c.135-1.752.202-2.628.777-3.16c.575-.533%201.454-.533%203.211-.533h3.592c1.757%200%202.636%200%203.21.533c.576.532.643%201.408.778%203.16L18%2013%22%2F%3E%3Cpath%20d%3D%22m8.5%206.5l.172-1.372c.156-1.251.234-1.877.66-2.253c.425-.375%201.055-.375%202.316-.375h.704c1.26%200%201.891%200%202.316.375c.426.376.504%201.002.66%202.253L15.5%206.5%22%2F%3E%3C%2Fg%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%3Cg%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.5%22%3E%3Cpath%20d%3D%22M2%2021.494c1.295.096%202.384-.994%203.333-.994s2.492%201.005%203.334.994c1.01.009%202.193-.994%203.333-.994s2.323%201.003%203.333.994c1.295.096%202.384-.994%203.334-.994s2.491%201.005%203.333.994M6%2020.5c-1.418-1.766-2.417-4.027-2.843-5.225c-.135-.38-.202-.57-.124-.752c.079-.181.27-.266.655-.436l7.49-3.318c.404-.18.607-.269.822-.269s.418.09.823.27l7.489%203.317c.384.17.576.255.655.436c.078.182.01.372-.124.752c-.426%201.198-1.425%203.459-2.843%205.225%22%2F%3E%3Cpath%20d%3D%22m6%2013l.216-2.807c.135-1.752.202-2.628.777-3.16c.575-.533%201.454-.533%203.211-.533h3.592c1.757%200%202.636%200%203.21.533c.576.532.643%201.408.778%203.16L18%2013%22%2F%3E%3Cpath%20d%3D%22m8.5%206.5l.172-1.372c.156-1.251.234-1.877.66-2.253c.425-.375%201.055-.375%202.316-.375h.704c1.26%200%201.891%200%202.316.375c.426.376.504%201.002.66%202.253L15.5%206.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/hugeicons/cargo-ship.svg?color=%231a73e8&size=48
