Bagel icon
fluent-emoji-high-contrast:bagel
The Bagel icon (fluent-emoji-high-contrast:bagel) is a free SVG icon from the Fluent Emoji High Contrast set by Microsoft Corporation. It is drawn on a 32 × 32 grid. Fluent Emoji High Contrast icons are released under the MIT license, which allows use in personal and commercial projects. Copy it as SVG, JSX, Vue or Svelte code, or download the SVG file.
- Icon set
- Fluent Emoji High Contrast
- Author
- Microsoft Corporation
- License
- MIT
- Size
- 32 × 32
- Category
- Food & Drink
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="currentColor"><path d="M17.407 7.137a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .994M6.06 11.548a.497.497 0 1 1-.994 0a.497.497 0 0 1 .994 0m6.936 6.946a.497.497 0 1 1-.994 0a.497.497 0 0 1 .993 0M11.366 7.425a.497.497 0 1 1-.994 0a.497.497 0 0 1 .994 0m2.772 8.754a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .994m-5.276-2.991a.497.497 0 1 1-.994 0a.497.497 0 0 1 .994 0m7.77-2.772a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .993M12.499 5.11a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .994M7.59 7.137a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .994m10.314 9.32a.497.497 0 1 1-.994 0a.497.497 0 0 1 .994 0m1.54-4.412a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .994M8.087 16.457a.497.497 0 1 1-.994 0a.497.497 0 0 1 .994 0m.338-6.171a.497.497 0 1 0 0-.993a.497.497 0 0 0 0 .993m8.655 3.031a.497.497 0 1 1-.994 0a.497.497 0 0 1 .993 0m-6.349 2.812a.497.497 0 1 0 0-.994a.497.497 0 0 0 0 .994m4.034-8.655a.497.497 0 1 1-.993 0a.497.497 0 0 1 .993 0m-2.673 6.489h1.004a2.4 2.4 0 0 0 2.404-2.405a2.406 2.406 0 0 0-2.404-2.404H12.09a2.407 2.407 0 0 0-2.404 2.404a2.407 2.407 0 0 0 2.404 2.405"/><path d="M8.01 2.038c5.181-2.502 11.432-.325 13.943 4.84l.053.112c.75.11 1.462.423 2.056.913l.003.002l1.322 1.076c.066.053.135.101.228.167l1.427.915a4.22 4.22 0 0 1 1.796 2.476v.003l.44 1.665q.026.105.074.238l.59 1.509h.05v.13a4.26 4.26 0 0 1-.009 2.988v2.16h-.022C29.609 26.676 25.074 31 19.534 31h-.11c-5.486 0-10.004-4.249-10.418-9.64a10.43 10.43 0 0 1-5.793-4.973l-.001-.003a4 4 0 0 1-.172-.343C.534 10.858 2.713 4.616 7.877 2.095l.033-.017zm13.556 14.7a2.4 2.4 0 0 1 .889 1.865a2.4 2.4 0 0 1-2.405 2.405h-1.003a2.4 2.4 0 0 1-1.383-.438a11 11 0 0 1-.54.281l-.105.053a10.4 10.4 0 0 1-5.366 1.014l.046.173c.134.522.473.99.944 1.295l.001.001l1.455.933l.024.017c.095.067.217.152.342.252l.006.005l1.337 1.087c.431.356.977.533 1.528.499h.004l1.707-.1a4 4 0 0 1 .506 0l1.703.1a2.3 2.3 0 0 0 1.543-.504l1.336-1.087c.124-.1.246-.185.34-.25l.026-.019l1.455-.933h.001c.464-.301.801-.767.947-1.306v-.002l.435-1.649c.035-.137.08-.273.112-.364l.017-.05l.008-.025l.634-1.619a2.26 2.26 0 0 0 0-1.615l-.63-1.607l-.003-.01a5 5 0 0 1-.138-.441l-.438-1.66a2.22 2.22 0 0 0-.944-1.296l-.001-.001l-1.455-.933l-.025-.017c-.094-.067-.216-.152-.34-.251l-.007-.005l-1.314-1.07a10.5 10.5 0 0 1-1.25 7.271m-1.412-8.986C18.12 3.57 13.045 1.81 8.853 3.852l-.033.016l-.098.04c-4.163 2.054-5.907 7.105-3.87 11.286l.016.033l.014.034c.012.031.03.067.085.164l.005.01l.005.009c2.113 4.004 7.061 5.649 11.164 3.663l.104-.052c4.192-2.034 5.944-7.108 3.91-11.303"/></g></svg>How to use the Bagel icon
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji-high-contrast:bagel" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji-high-contrast:bagel" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji-high-contrast:bagel" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji-high-contrast--bagel]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji-high-contrast -->
<div class="i-fluent-emoji-high-contrast:bagel"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji-high-contrast:bagel"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/bagel.svg" alt="Bagel icon" width="24" height="24">Bagel icon in other icon sets
Bagel icon FAQ
Is the Bagel icon free for commercial use?
Yes. Fluent Emoji High Contrast icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Bagel icon in React?
Install @iconify/react and render <Icon icon="fluent-emoji-high-contrast:bagel" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Bagel icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/bagel.svg" alt="Bagel icon">, or paste the SVG code inline to style it with CSS.