shipping container icon

shipping-container from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name
shipping-container
Set
Phosphor
Style
Regular
Viewbox
256×256
License
MIT

5 other variants in Phosphor

shipping-container-boldshipping-container-duotoneshipping-container-fillshipping-container-lightshipping-container-thin

Use the shipping container icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.4 70.65L130.2 40.31a8 8 0 0 0-3.33-.23L21.74 55.1A16.08 16.08 0 0 0 8 70.94v114.12a16.08 16.08 0 0 0 13.74 15.84l105.13 15a8.5 8.5 0 0 0 1.13.1a8 8 0 0 0 2.2-.31l106.2-30.34A16.07 16.07 0 0 0 248 170V86a16.07 16.07 0 0 0-11.6-15.35M96 120H80V62.94l40-5.72v141.56l-40-5.72V136h16a8 8 0 0 0 0-16M24 70.94l40-5.72V120H48a8 8 0 0 0 0 16h16v54.78l-40-5.72Zm112 126.45V58.61L232 86v84Z"/></svg>

React

import type { SVGProps } from "react";

export function PhShippingContainer(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.4 70.65L130.2 40.31a8 8 0 0 0-3.33-.23L21.74 55.1A16.08 16.08 0 0 0 8 70.94v114.12a16.08 16.08 0 0 0 13.74 15.84l105.13 15a8.5 8.5 0 0 0 1.13.1a8 8 0 0 0 2.2-.31l106.2-30.34A16.07 16.07 0 0 0 248 170V86a16.07 16.07 0 0 0-11.6-15.35M96 120H80V62.94l40-5.72v141.56l-40-5.72V136h16a8 8 0 0 0 0-16M24 70.94l40-5.72V120H48a8 8 0 0 0 0 16h16v54.78l-40-5.72Zm112 126.45V58.61L232 86v84Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M236.4 70.65L130.2 40.31a8 8 0 0 0-3.33-.23L21.74 55.1A16.08 16.08 0 0 0 8 70.94v114.12a16.08 16.08 0 0 0 13.74 15.84l105.13 15a8.5 8.5 0 0 0 1.13.1a8 8 0 0 0 2.2-.31l106.2-30.34A16.07 16.07 0 0 0 248 170V86a16.07 16.07 0 0 0-11.6-15.35M96 120H80V62.94l40-5.72v141.56l-40-5.72V136h16a8 8 0 0 0 0-16M24 70.94l40-5.72V120H48a8 8 0 0 0 0 16h16v54.78l-40-5.72Zm112 126.45V58.61L232 86v84Z"/></svg>
</template>

CSS

.icon-shipping-container {
  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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M236.4%2070.65L130.2%2040.31a8%208%200%200%200-3.33-.23L21.74%2055.1A16.08%2016.08%200%200%200%208%2070.94v114.12a16.08%2016.08%200%200%200%2013.74%2015.84l105.13%2015a8.5%208.5%200%200%200%201.13.1a8%208%200%200%200%202.2-.31l106.2-30.34A16.07%2016.07%200%200%200%20248%20170V86a16.07%2016.07%200%200%200-11.6-15.35M96%20120H80V62.94l40-5.72v141.56l-40-5.72V136h16a8%208%200%200%200%200-16M24%2070.94l40-5.72V120H48a8%208%200%200%200%200%2016h16v54.78l-40-5.72Zm112%20126.45V58.61L232%2086v84Z%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%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M236.4%2070.65L130.2%2040.31a8%208%200%200%200-3.33-.23L21.74%2055.1A16.08%2016.08%200%200%200%208%2070.94v114.12a16.08%2016.08%200%200%200%2013.74%2015.84l105.13%2015a8.5%208.5%200%200%200%201.13.1a8%208%200%200%200%202.2-.31l106.2-30.34A16.07%2016.07%200%200%200%20248%20170V86a16.07%2016.07%200%200%200-11.6-15.35M96%20120H80V62.94l40-5.72v141.56l-40-5.72V136h16a8%208%200%200%200%200-16M24%2070.94l40-5.72V120H48a8%208%200%200%200%200%2016h16v54.78l-40-5.72Zm112%20126.45V58.61L232%2086v84Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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