bread icon

bread from IconPark by ByteDance · Color · Foods · Apache-2.0 Free for personal and commercial use.

Name: bread
Set: IconPark
Style: Color
Category: Foods
Viewbox: 48×48
License: Apache 2.0

The same icon in other sets

breadEmoji One (Colored)breadFluent Emoji breadFluent Emoji Flat breadFluent Emoji High Contrast breadFirefox OS Emoji breadIconPark Outline breadIconPark Solid breadIconPark TwoTone bread-fillMingCute Icon breadNoto Emoji breadOpenMoji breadPhosphor bread-fillRemix Icon breadStreamline Emojis breadTabler Icons breadTDesign Icons breadTwitter Emoji

More foods icons from IconPark

Use the bread icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" d="M4 32.0833C4 30.8812 4.266 29.6884 4.97123 28.7148C7.04541 25.8514 12.6701 20 24 20C35.3299 20 40.9546 25.8514 43.0288 28.7148C43.734 29.6884 44 30.8812 44 32.0833C44 36.4556 40.4556 40 36.0833 40H11.9167C7.54441 40 4 36.4556 4 32.0833Z"/><path stroke="#000" d="M12 9L12 13"/><path stroke="#fff" d="M14 22L14 26"/><path stroke="#000" d="M36 9L36 13"/><path stroke="#fff" d="M34 22L34 26"/><path stroke="#000" d="M24 7L24 13"/><path stroke="#fff" d="M24 20L24 28"/><path stroke="#000" d="M40 25.4434C36.9058 22.7787 31.8075 20 24 20C16.1925 20 11.0942 22.7787 8 25.4434"/></g></svg>

React

import type { SVGProps } from "react";

export function IconParkBread(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" strokeLinecap="round" strokeWidth="4"><path fill="#2F88FF" stroke="#000" strokeLinejoin="round" d="M4 32.0833C4 30.8812 4.266 29.6884 4.97123 28.7148C7.04541 25.8514 12.6701 20 24 20C35.3299 20 40.9546 25.8514 43.0288 28.7148C43.734 29.6884 44 30.8812 44 32.0833C44 36.4556 40.4556 40 36.0833 40H11.9167C7.54441 40 4 36.4556 4 32.0833Z"/><path stroke="#000" d="M12 9L12 13"/><path stroke="#fff" d="M14 22L14 26"/><path stroke="#000" d="M36 9L36 13"/><path stroke="#fff" d="M34 22L34 26"/><path stroke="#000" d="M24 7L24 13"/><path stroke="#fff" d="M24 20L24 28"/><path stroke="#000" d="M40 25.4434C36.9058 22.7787 31.8075 20 24 20C16.1925 20 11.0942 22.7787 8 25.4434"/></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 48 48"><g fill="none" stroke-linecap="round" stroke-width="4"><path fill="#2F88FF" stroke="#000" stroke-linejoin="round" d="M4 32.0833C4 30.8812 4.266 29.6884 4.97123 28.7148C7.04541 25.8514 12.6701 20 24 20C35.3299 20 40.9546 25.8514 43.0288 28.7148C43.734 29.6884 44 30.8812 44 32.0833C44 36.4556 40.4556 40 36.0833 40H11.9167C7.54441 40 4 36.4556 4 32.0833Z"/><path stroke="#000" d="M12 9L12 13"/><path stroke="#fff" d="M14 22L14 26"/><path stroke="#000" d="M36 9L36 13"/><path stroke="#fff" d="M34 22L34 26"/><path stroke="#000" d="M24 7L24 13"/><path stroke="#fff" d="M24 20L24 28"/><path stroke="#000" d="M40 25.4434C36.9058 22.7787 31.8075 20 24 20C16.1925 20 11.0942 22.7787 8 25.4434"/></g></svg>
</template>

CSS

.icon-bread {
  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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M4%2032.0833C4%2030.8812%204.266%2029.6884%204.97123%2028.7148C7.04541%2025.8514%2012.6701%2020%2024%2020C35.3299%2020%2040.9546%2025.8514%2043.0288%2028.7148C43.734%2029.6884%2044%2030.8812%2044%2032.0833C44%2036.4556%2040.4556%2040%2036.0833%2040H11.9167C7.54441%2040%204%2036.4556%204%2032.0833Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M12%209L12%2013%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M14%2022L14%2026%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M36%209L36%2013%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M34%2022L34%2026%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M24%207L24%2013%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M24%2020L24%2028%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M40%2025.4434C36.9058%2022.7787%2031.8075%2020%2024%2020C16.1925%2020%2011.0942%2022.7787%208%2025.4434%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%2048%2048%22%3E%3Cg%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-width%3D%224%22%3E%3Cpath%20fill%3D%22%232F88FF%22%20stroke%3D%22%23000%22%20stroke-linejoin%3D%22round%22%20d%3D%22M4%2032.0833C4%2030.8812%204.266%2029.6884%204.97123%2028.7148C7.04541%2025.8514%2012.6701%2020%2024%2020C35.3299%2020%2040.9546%2025.8514%2043.0288%2028.7148C43.734%2029.6884%2044%2030.8812%2044%2032.0833C44%2036.4556%2040.4556%2040%2036.0833%2040H11.9167C7.54441%2040%204%2036.4556%204%2032.0833Z%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M12%209L12%2013%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M14%2022L14%2026%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M36%209L36%2013%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M34%2022L34%2026%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M24%207L24%2013%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20d%3D%22M24%2020L24%2028%22%2F%3E%3Cpath%20stroke%3D%22%23000%22%20d%3D%22M40%2025.4434C36.9058%2022.7787%2031.8075%2020%2024%2020C16.1925%2020%2011.0942%2022.7787%208%2025.4434%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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