bucket icon

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

Name: bucket
Set: Font Awesome 6 Solid
Style: Regular
Viewbox: 448×512
License: CC BY 4.0

The same icon in other sets

bucketBootstrap Icons bucketFont Awesome Solid bucketFluent Emoji bucketFluent Emoji Flat bucketFluent Emoji High Contrast bucketHuge Icons bucketLucide Lab bucketMaterial Design Icons bucketNoto Emoji bucketOpenMoji bucketTabler Icons bucketTwitter Emoji

Use the bucket icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M96 152v8H48v-8C48 68.1 116.1 0 200 0h48c83.9 0 152 68.1 152 152v8h-48v-8c0-57.4-46.6-104-104-104h-48C142.6 48 96 94.6 96 152M0 224c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32h-5.1l-22.4 213c-2.6 24.4-23.2 43-47.7 43H107.2c-24.6 0-45.2-18.5-47.7-43L37.1 256H32c-17.7 0-32-14.3-32-32"/></svg>

React

import type { SVGProps } from "react";

export function Fa6SolidBucket(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M96 152v8H48v-8C48 68.1 116.1 0 200 0h48c83.9 0 152 68.1 152 152v8h-48v-8c0-57.4-46.6-104-104-104h-48C142.6 48 96 94.6 96 152M0 224c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32h-5.1l-22.4 213c-2.6 24.4-23.2 43-47.7 43H107.2c-24.6 0-45.2-18.5-47.7-43L37.1 256H32c-17.7 0-32-14.3-32-32"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M96 152v8H48v-8C48 68.1 116.1 0 200 0h48c83.9 0 152 68.1 152 152v8h-48v-8c0-57.4-46.6-104-104-104h-48C142.6 48 96 94.6 96 152M0 224c0-17.7 14.3-32 32-32h384c17.7 0 32 14.3 32 32s-14.3 32-32 32h-5.1l-22.4 213c-2.6 24.4-23.2 43-47.7 43H107.2c-24.6 0-45.2-18.5-47.7-43L37.1 256H32c-17.7 0-32-14.3-32-32"/></svg>
</template>

CSS

.icon-bucket {
  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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M96%20152v8H48v-8C48%2068.1%20116.1%200%20200%200h48c83.9%200%20152%2068.1%20152%20152v8h-48v-8c0-57.4-46.6-104-104-104h-48C142.6%2048%2096%2094.6%2096%20152M0%20224c0-17.7%2014.3-32%2032-32h384c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-5.1l-22.4%20213c-2.6%2024.4-23.2%2043-47.7%2043H107.2c-24.6%200-45.2-18.5-47.7-43L37.1%20256H32c-17.7%200-32-14.3-32-32%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%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M96%20152v8H48v-8C48%2068.1%20116.1%200%20200%200h48c83.9%200%20152%2068.1%20152%20152v8h-48v-8c0-57.4-46.6-104-104-104h-48C142.6%2048%2096%2094.6%2096%20152M0%20224c0-17.7%2014.3-32%2032-32h384c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-5.1l-22.4%20213c-2.6%2024.4-23.2%2043-47.7%2043H107.2c-24.6%200-45.2-18.5-47.7-43L37.1%20256H32c-17.7%200-32-14.3-32-32%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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