Home/Libraries/Fluent Emoji (Iconify)/bread

Fluent Emoji (Iconify)

Bread

License: MITCommercial Safe

ICON SIZE

STROKE WEIGHT1.5px

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 32 32"><g fill="none"><path fill="url(#ilQyRLb)" d="M27.34 25.593L15 30V16.5L29 13v10.238a2.5 2.5 0 0 1-1.66 2.355"/><path fill="url(#iFPPREb)" d="M14.59 3.262L3.202 7.556L17 19l10.98-3.8A3 3 0 0 0 30 12.364v-.904a5 5 0 0 0-3.239-4.679l-9.35-3.52a4 4 0 0 0-2.821 0"/><path fill="url(#irjeT6b)" d="M3 13.5v9.955a3 3 0 0 0 1.903 2.793l9.366 3.679A2 2 0 0 0 17 28.065V19l.157-.235a5.02 5.02 0 0 0-2.415-7.487L4.702 7.513A2 2 0 0 0 2 9.386v1.403a4 4 0 0 0 .672 2.219z"/><g filter="url(#ibhkele)"><path stroke="url(#ixxKgIb)" stroke-width="1.5" d="m4.702 7.513l10.04 3.765a5.02 5.02 0 0 1 2.415 7.487L17 19v9.065"/></g><path fill="url(#ibtdaOd)" d="M3.083 13.598v9.8c0 1.214.746 2.304 1.882 2.748l9.263 3.622c1.298.507 2.6-.445 2.6-1.832v-8.924l.155-.231a4.93 4.93 0 0 0 .834-2.742c0-2.06-1.183-3.904-3.121-4.628l-9.93-3.706c-1.293-.482-2.672.469-2.672 1.844v1.38c0 .778.23 1.538.664 2.185z"/><path fill="#818cf8" d="M8 13.566c0 .24-.138.434-.309.434s-.308-.194-.308-.434s.033-.421.203-.421s.414.182.414.421"/><ellipse cx="7.653" cy="13.563" fill="url(#ifBIHbb)" rx=".304" ry=".457" transform="rotate(-17.946 7.653 13.563)"/><ellipse cx="5.692" cy="14.528" fill="url(#idZCcXb)" rx=".304" ry=".457" transform="rotate(-17.946 5.692 14.528)"/><ellipse cx="5.692" cy="17.472" fill="url(#iBxSvbc)" rx=".304" ry=".457" transform="rotate(-17.946 5.692 17.472)"/><ellipse cx="5.629" cy="21.472" fill="url(#idtORvA)" rx=".304" ry=".457" transform="rotate(-17.946 5.63 21.472)"/><ellipse cx="7.614" cy="20.472" fill="url(#ifcNEBb)" rx=".304" ry=".457" transform="rotate(-17.946 7.614 20.472)"/><ellipse cx="7.614" cy="16.472" fill="url(#iTQzt5d)" rx=".304" ry=".457" transform="rotate(-17.946 7.614 16.472)"/><ellipse cx="9.622" cy="15.472" fill="url(#iSDcoEc)" rx=".304" ry=".457" transform="rotate(-17.946 9.622 15.472)"/><ellipse cx="11.57" cy="14.528" fill="url(#iwBp4bb)" rx=".304" ry=".457" transform="rotate(-17.946 11.57 14.528)"/><ellipse cx="11.5" cy="18.528" fill="url(#ihQPtbb)" rx=".304" ry=".457" transform="rotate(-17.946 11.5 18.528)"/><ellipse cx="9.57" cy="19.528" fill="url(#iiaQxfc)" rx=".304" ry=".457" transform="rotate(-17.946 9.57 19.528)"/><ellipse cx="9.524" cy="23.356" fill="url(#iJV2gJd)" rx=".304" ry=".457" transform="rotate(-17.946 9.524 23.356)"/><ellipse cx="11.5" cy="22.341" fill="url(#isJu91d)" rx=".304" ry=".457" transform="rotate(-17.946 11.5 22.341)"/><ellipse cx="13.43" cy="24.472" fill="url(#i65HDAd)" rx=".304" ry=".457" transform="rotate(-17.946 13.43 24.472)"/><ellipse cx="13.43" cy="21.417" fill="url(#iwRLzEe)" rx=".304" ry=".457" transform="rotate(-17.946 13.43 21.417)"/><ellipse cx="13.465" cy="17.571" fill="url(#irGiN8b)" rx=".304" ry=".457" transform="rotate(-17.946 13.465 17.57)"/><g filter="url(#ifYdwUd)"><path stroke="url(#iUVwVRd)" stroke-width="1.5" d="M2.672 8.281c.344-.453 1.182-.744 1.64-.61c.532.157 7.198 2.641 10.75 3.985c1.037.392 3.094 2.313 2.532 5.172"/></g><defs><radialGradient id="ibtdaOd" cx="0" cy="0" r="1" gradientTransform="rotate(-20.596 57.007 8.937)scale(20.965 19.3732)" gradientUnits="userSpaceOnUse"><stop offset=".35" stop-color="#CAA177"/><stop offset="1" stop-color="#BE977C"/></radialGradient><radialGradient id="ifBIHbb" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 7.081 13.934)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="idZCcXb" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 5.12 14.899)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iBxSvbc" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 5.12 17.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="idtORvA" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 5.058 21.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="ifcNEBb" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 7.042 20.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iTQzt5d" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 7.042 16.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iSDcoEc" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 9.05 15.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iwBp4bb" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 10.999 14.899)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="ihQPtbb" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 10.929 18.899)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iiaQxfc" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 8.999 19.899)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iJV2gJd" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 8.952 23.727)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="isJu91d" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 10.929 22.712)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="i65HDAd" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 12.858 24.842)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iwRLzEe" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 12.858 21.787)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="irGiN8b" cx="0" cy="0" r="1" gradientTransform="matrix(.98016 -.2379 .158 .65098 12.893 17.941)" gradientUnits="userSpaceOnUse"><stop stop-color="#AC8761" stop-opacity="0"/><stop offset="1" stop-color="#956B54"/></radialGradient><radialGradient id="iUVwVRd" cx="0" cy="0" r="1" gradientTransform="rotate(98.319 .633 9.556)scale(6.00063 13.6225)" gradientUnits="userSpaceOnUse"><stop stop-color="#F2CE97"/><stop offset="1" stop-color="#FFEBCB" stop-opacity="0"/></radialGradient><linearGradient id="ilQyRLb" x1="22" x2="26.5" y1="16.375" y2="28" gradientUnits="userSpaceOnUse"><stop stop-color="#C3844A"/><stop offset=".677" stop-color="#BC7B46"/><stop offset=".845" stop-color="#895461"/></linearGradient><linearGradient id="iFPPREb" x1="13.75" x2="19.375" y1="3.005" y2="18.25" gradientUnits="userSpaceOnUse"><stop offset=".025" stop-color="#FFC173"/><stop offset=".102" stop-color="#FFC974"/><stop offset=".644" stop-color="#FFCB79"/><stop offset=".754" stop-color="#FFBB6E"/><stop offset=".876" stop-color="#E09F59"/><stop offset="1" stop-color="#9C5C44"/></linearGradient><linearGradient id="irjeT6b" x1="1.688" x2="14.625" y1="8.875" y2="30.067" gradientUnits="userSpaceOnUse"><stop stop-color="#DF994E"/><stop offset=".483" stop-color="#E0994D"/><stop offset="1" stop-color="#925440"/></linearGradient><linearGradient id="ixxKgIb" x1="4.063" x2="15.781" y1="7.75" y2="29.844" gradientUnits="userSpaceOnUse"><stop stop-color="#DF9A4F"/><stop offset=".427" stop-color="#E2994D"/><stop offset="1" stop-color="#925440"/></linearGradient><filter id="ibhkele" width="13.765" height="20.999" x="4.485" y="7.266" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_32476" stdDeviation=".1"/></filter><filter id="ifYdwUd" width="15.307" height="9.449" x="2.532" y="7.489" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_32476" stdDeviation=".05"/></filter></defs></g></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. BreadIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.