Bento icon
thesvg-color:bento
The Bento icon (thesvg-color:bento) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 45 × 41 grid. theSVG Color 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
- theSVG Color
- Author
- thesvg.org
- License
- MIT
- Size
- 45 × 41
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="41" viewBox="0 0 45 41"><g fill="none"><path fill="#dbdbdb" fill-rule="evenodd" d="M4.206 28.621C1.883 26.804.722 25.895.287 24.847L0 23.419v-5.847h1.464v2.909c.641-.601 1.535-1.3 2.742-2.245l11.611-9.087c2.323-1.818 3.484-2.727 4.823-3.067c1.178-.3 2.447-.3 3.625 0c1.339.34 2.5 1.25 4.822 3.067L40.7 18.236c1.207.945 2.1 1.644 2.742 2.245v-2.91h1.464v5.858c0 .478-.096.957-.287 1.418c-.435 1.048-1.597 1.957-3.92 3.774l-11.61 9.088c-2.323 1.817-3.484 2.726-4.823 3.066c-1.178.3-2.447.3-3.625 0c-1.339-.34-2.5-1.249-4.823-3.066z" clip-rule="evenodd"/><path fill="#fff" d="M4.206 22.764C1.883 20.947.722 20.038.287 18.99a3.65 3.65 0 0 1 0-2.837c.435-1.048 1.596-1.957 3.919-3.774l11.611-9.087C18.14 1.474 19.301.565 20.64.225c1.178-.3 2.447-.3 3.625 0c1.339.34 2.5 1.249 4.822 3.067L40.7 12.379c2.322 1.817 3.484 2.726 3.919 3.774a3.65 3.65 0 0 1 0 2.837c-.435 1.048-1.597 1.957-3.92 3.774l-11.61 9.087c-2.323 1.818-3.484 2.727-4.823 3.067c-1.178.3-2.447.3-3.625 0c-1.339-.34-2.5-1.25-4.823-3.067z"/><path fill="#ff8686" d="M17.476 11.513c-1.161-.909-1.742-1.363-1.96-1.887a1.82 1.82 0 0 1 0-1.418c.218-.524.799-.979 1.96-1.887l1.659-1.299c1.161-.908 1.742-1.363 2.411-1.533a3.7 3.7 0 0 1 1.813 0c.67.17 1.25.625 2.41 1.533l1.66 1.299c1.161.908 1.742 1.363 1.96 1.887c.19.46.19.957 0 1.418c-.218.524-.799.979-1.96 1.887l-1.66 1.299c-1.16.908-1.74 1.363-2.41 1.533a3.7 3.7 0 0 1-1.813 0c-.67-.17-1.25-.625-2.411-1.533z"/><path fill="#5aff88" d="M28.535 20.168c-1.162-.909-1.742-1.363-1.96-1.887a1.82 1.82 0 0 1 0-1.419c.218-.524.798-.978 1.96-1.887l1.658-1.298c1.162-.909 1.742-1.363 2.412-1.533a3.7 3.7 0 0 1 1.812 0c.67.17 1.25.624 2.411 1.533l1.66 1.298c1.16.909 1.741 1.363 1.959 1.887c.191.461.191.958 0 1.419c-.218.524-.799.978-1.96 1.887l-1.659 1.298c-1.16.909-1.742 1.363-2.411 1.533a3.7 3.7 0 0 1-1.812 0c-.67-.17-1.25-.624-2.412-1.533z"/><path fill="#768cff" d="M6.418 20.168c-1.162-.909-1.742-1.363-1.96-1.887a1.82 1.82 0 0 1 0-1.419c.218-.524.798-.978 1.96-1.887l1.658-1.298c1.162-.909 1.742-1.363 2.412-1.533a3.7 3.7 0 0 1 1.812 0c.67.17 1.25.624 2.411 1.533L27.43 23.63c1.161.908 1.742 1.363 1.96 1.887c.19.46.19.957 0 1.418c-.218.524-.799.978-1.96 1.887l-1.66 1.298c-1.16.91-1.74 1.364-2.41 1.534c-.59.15-1.224.15-1.813 0c-.67-.17-1.25-.625-2.411-1.534z"/></g></svg>
How to use the Bento icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:bento" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:bento" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:bento" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--bento]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:bento"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:bento"></iconify-icon>
HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/bento.svg" alt="Bento icon" width="24" height="24">
Related icons in theSVG Color
Bento icon in other icon sets
Bento icon FAQ
Is the Bento icon free for commercial use?
Yes. theSVG Color icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Bento icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:bento" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Bento icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/bento.svg" alt="Bento icon">, or paste the SVG code inline to style it with CSS.
Browse all theSVG Color icons →
ICONYZ
