packaging icon

packaging from Huge Icons by Hugeicons · Stroke · MIT Free for personal and commercial use.

Name
packaging
Set
Huge Icons
Style
Stroke
Viewbox
24×24
License
MIT

Use the packaging 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="M17.5 22s-.5-2-.5-5c0-5.6 1.333-12.333 2-15c.667 3 2 10 2 14c0 1.22-.186 2.626-.331 3.538a1.91 1.91 0 0 1-1.044 1.4zm0 0H5.062c-.918 0-1.711-.627-1.835-1.537A26 26 0 0 1 3 17C3 11 5 5 5 5"/><path d="M5.78 2H19c-.096.384-.206.851-.323 1.388A2.04 2.04 0 0 1 16.697 5H4.343c.167-.854.33-1.612.475-2.24A.984.984 0 0 1 5.781 2m.24 16.074Q6.001 17.562 6 17c0-1.652.116-3.402.297-5.117A.99.99 0 0 1 7.284 11h5.986c.599 0 1.063.523 1.002 1.119A49 49 0 0 0 14 17q0 .48.016.924A1.03 1.03 0 0 1 12.996 19H7.003a.973.973 0 0 1-.98-.926"/></g></svg>

React

import type { SVGProps } from "react";

export function HugeiconsPackaging(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="M17.5 22s-.5-2-.5-5c0-5.6 1.333-12.333 2-15c.667 3 2 10 2 14c0 1.22-.186 2.626-.331 3.538a1.91 1.91 0 0 1-1.044 1.4zm0 0H5.062c-.918 0-1.711-.627-1.835-1.537A26 26 0 0 1 3 17C3 11 5 5 5 5"/><path d="M5.78 2H19c-.096.384-.206.851-.323 1.388A2.04 2.04 0 0 1 16.697 5H4.343c.167-.854.33-1.612.475-2.24A.984.984 0 0 1 5.781 2m.24 16.074Q6.001 17.562 6 17c0-1.652.116-3.402.297-5.117A.99.99 0 0 1 7.284 11h5.986c.599 0 1.063.523 1.002 1.119A49 49 0 0 0 14 17q0 .48.016.924A1.03 1.03 0 0 1 12.996 19H7.003a.973.973 0 0 1-.98-.926"/></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="M17.5 22s-.5-2-.5-5c0-5.6 1.333-12.333 2-15c.667 3 2 10 2 14c0 1.22-.186 2.626-.331 3.538a1.91 1.91 0 0 1-1.044 1.4zm0 0H5.062c-.918 0-1.711-.627-1.835-1.537A26 26 0 0 1 3 17C3 11 5 5 5 5"/><path d="M5.78 2H19c-.096.384-.206.851-.323 1.388A2.04 2.04 0 0 1 16.697 5H4.343c.167-.854.33-1.612.475-2.24A.984.984 0 0 1 5.781 2m.24 16.074Q6.001 17.562 6 17c0-1.652.116-3.402.297-5.117A.99.99 0 0 1 7.284 11h5.986c.599 0 1.063.523 1.002 1.119A49 49 0 0 0 14 17q0 .48.016.924A1.03 1.03 0 0 1 12.996 19H7.003a.973.973 0 0 1-.98-.926"/></g></svg>
</template>

CSS

.icon-packaging {
  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%22M17.5%2022s-.5-2-.5-5c0-5.6%201.333-12.333%202-15c.667%203%202%2010%202%2014c0%201.22-.186%202.626-.331%203.538a1.91%201.91%200%200%201-1.044%201.4zm0%200H5.062c-.918%200-1.711-.627-1.835-1.537A26%2026%200%200%201%203%2017C3%2011%205%205%205%205%22%2F%3E%3Cpath%20d%3D%22M5.78%202H19c-.096.384-.206.851-.323%201.388A2.04%202.04%200%200%201%2016.697%205H4.343c.167-.854.33-1.612.475-2.24A.984.984%200%200%201%205.781%202m.24%2016.074Q6.001%2017.562%206%2017c0-1.652.116-3.402.297-5.117A.99.99%200%200%201%207.284%2011h5.986c.599%200%201.063.523%201.002%201.119A49%2049%200%200%200%2014%2017q0%20.48.016.924A1.03%201.03%200%200%201%2012.996%2019H7.003a.973.973%200%200%201-.98-.926%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%22M17.5%2022s-.5-2-.5-5c0-5.6%201.333-12.333%202-15c.667%203%202%2010%202%2014c0%201.22-.186%202.626-.331%203.538a1.91%201.91%200%200%201-1.044%201.4zm0%200H5.062c-.918%200-1.711-.627-1.835-1.537A26%2026%200%200%201%203%2017C3%2011%205%205%205%205%22%2F%3E%3Cpath%20d%3D%22M5.78%202H19c-.096.384-.206.851-.323%201.388A2.04%202.04%200%200%201%2016.697%205H4.343c.167-.854.33-1.612.475-2.24A.984.984%200%200%201%205.781%202m.24%2016.074Q6.001%2017.562%206%2017c0-1.652.116-3.402.297-5.117A.99.99%200%200%201%207.284%2011h5.986c.599%200%201.063.523%201.002%201.119A49%2049%200%200%200%2014%2017q0%20.48.016.924A1.03%201.03%200%200%201%2012.996%2019H7.003a.973.973%200%200%201-.98-.926%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/packaging.svg?color=%231a73e8&size=48