Donut icon
flat-ui:donut
The Donut icon (flat-ui:donut) is a free SVG icon from the Flat UI Icons set by Designmodo, Inc.. It is drawn on a 100 × 100 grid. Flat UI 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
- Flat UI Icons
- Author
- Designmodo, Inc.
- License
- MIT
- Size
- 100 × 100
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="#EAB39C" d="M49.978 0C22.358 0 0 22.39 0 50.008S22.358 100 49.978 100s50.009-22.373 50.009-49.993C99.986 22.39 77.597 0 49.978 0m.023 68.006c-9.94 0-18-8.059-18-18s8.06-18 18-18c9.941 0 18 8.059 18 18s-8.059 18-18 18"/><path fill="#955BA5" d="M93.061 37.116c-3.145-2.781-5.727-8.514-5.76-12.726c-.031-4.212-3.447-8.183-7.573-8.812c-4.14-.631-9.393-4.035-11.679-7.568c-2.294-3.533-7.281-5.013-11.104-3.283c-3.817 1.722-10.065 1.722-13.883 0c-3.817-1.73-8.814-.25-11.101 3.283c-2.286 3.533-7.543 6.938-11.682 7.568c-4.134.63-7.543 4.6-7.575 8.812s-2.626 9.945-5.767 12.726c-3.141 2.789-3.882 7.989-1.648 11.546C7.53 52.227 8.42 58.461 7.27 62.52c-1.151 4.05 1.014 8.82 4.808 10.607c3.79 1.779 7.884 6.541 9.091 10.576c1.207 4.034 5.59 6.873 9.732 6.307s10.138 1.205 13.322 3.945c3.18 2.732 8.385 2.732 11.564 0c3.18-2.742 9.175-4.512 13.321-3.945s8.524-2.271 9.737-6.307c1.202-4.035 5.297-8.797 9.083-10.576c3.802-1.787 5.967-6.558 4.812-10.607c-1.155-4.059-.257-10.293 1.973-13.858c2.23-3.558 1.492-8.757-1.652-11.546M50.002 65.87c-8.691 0-15.737-7.104-15.737-15.866s7.046-15.865 15.737-15.865c8.692 0 15.739 7.103 15.739 15.865S58.695 65.87 50.002 65.87"/><path fill="#F29C1F" d="m34.791 32.163l-4.737-3.681a1.5 1.5 0 1 0-1.84 2.369l4.738 3.681a1.5 1.5 0 1 0 1.839-2.369m46.605 27.898a1.5 1.5 0 0 0-2.113.184l-3.859 4.596a1.5 1.5 0 0 0 2.299 1.928l3.857-4.595a1.5 1.5 0 0 0-.184-2.113m-1.517-30.513a1.5 1.5 0 0 0-1.111-1.806l-5.837-1.388a1.5 1.5 0 0 0-1.807 1.112a1.5 1.5 0 0 0 1.112 1.806l5.837 1.388a1.5 1.5 0 0 0 1.806-1.112M33.315 75.682l-5.962.67a1.5 1.5 0 1 0 .335 2.98l5.962-.67a1.5 1.5 0 1 0-.335-2.98"/><path fill="#FFC60A" d="M17.001 53.006a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m69-2.999a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001"/><path fill="#56C1A6" d="M79.811 43.458a1.5 1.5 0 0 0-2.12-.087l-4.413 4.065a1.501 1.501 0 0 0 2.033 2.207l4.413-4.065a1.5 1.5 0 0 0 .087-2.12m-61.692-8.435a1.5 1.5 0 0 0-1.367 1.622l.511 5.979a1.5 1.5 0 1 0 2.988-.255l-.51-5.979a1.5 1.5 0 0 0-1.622-1.367m21.882 45.983a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m4-58.999a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001"/><path fill="#FBF063" d="m25.282 61.245l-3.859 4.596a1.5 1.5 0 0 0 2.299 1.928l3.857-4.595a1.5 1.5 0 1 0-2.297-1.929m27.751-41.018a1.5 1.5 0 0 0 .396-2.083l-3.376-4.96a1.501 1.501 0 0 0-2.481 1.688l3.375 4.96a1.504 1.504 0 0 0 2.086.395m-1.032 60.779a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m-18-15a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m-1-45.999a2 2 0 1 0-4.001.001a2 2 0 0 0 4-.001zm40 15a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001"/><path fill="#F57E20" d="M73.001 76.006a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m-13-51.999a2 2 0 1 0 0 4a2 2 0 0 0 0-4"/><path fill="#6AC9F2" d="M62.458 74.104a1.47 1.47 0 0 0-1.79-1.141a1.58 1.58 0 0 0-1.188 1.836l1.202 5.951a1.47 1.47 0 0 0 1.79 1.142a1.58 1.58 0 0 0 1.188-1.835zm7.543-12.098a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m-44-15.999a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m20 26.999a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m19-57.999a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001m21 23a2 2 0 1 0 .001 4.001a2 2 0 0 0-.001-4.001"/><path fill="#D3896D" d="M51.978 98C24.358 98 2 75.627 2 48.008c0-13.309 5.202-25.395 13.673-34.355C6.026 22.771 0 35.681 0 50.008C0 77.627 22.358 100 49.978 100c14.322 0 27.229-6.026 36.347-15.672C77.365 92.799 65.283 98 51.978 98"/><path fill="#854D9B" d="M66.741 49.004c0-8.762-7.046-15.865-15.739-15.865c-4.578 0-8.687 1.983-11.562 5.128c2.794-2.557 6.492-4.128 10.562-4.128c8.692 0 15.739 7.103 15.739 15.865c0 4.147-1.591 7.911-4.175 10.737a15.87 15.87 0 0 0 5.175-11.737M7.94 36.116c3.14-2.781 5.733-8.514 5.767-12.726c.017-2.104.874-4.147 2.244-5.744c-1.938 1.686-3.225 4.167-3.244 6.744c-.028 3.801-2.146 8.834-4.867 11.825zM32.963 7.009c.188-.29.399-.561.622-.823a8.3 8.3 0 0 0-1.622 1.823a13 13 0 0 1-1.351 1.712c.939-.864 1.75-1.783 2.351-2.712m55.965 65.118c-1.67.785-3.397 2.149-4.912 3.775c1.253-1.179 2.6-2.158 3.912-2.775c1.085-.51 2.029-1.269 2.81-2.178a8.2 8.2 0 0 1-1.81 1.178M70.108 89.01c-4.146-.566-10.143 1.205-13.321 3.945c-3.18 2.732-8.385 2.732-11.564 0c-3.185-2.742-9.18-4.512-13.322-3.945s-8.525-2.271-9.732-6.307s-5.301-8.797-9.091-10.576C9.284 70.34 7.118 65.57 8.27 61.52c1.15-4.059.26-10.293-1.978-13.858c-2.059-3.278-1.584-7.948.96-10.843l-.312.297c-3.141 2.789-3.882 7.989-1.648 11.546C7.53 52.227 8.42 58.461 7.27 62.52c-1.151 4.05 1.014 8.82 4.808 10.607c3.79 1.779 7.884 6.541 9.091 10.576c1.207 4.034 5.59 6.873 9.732 6.307s10.138 1.205 13.322 3.945c3.18 2.732 8.385 2.732 11.564 0c3.18-2.742 9.175-4.512 13.321-3.945c2.971.404 6.054-.941 8.013-3.219c-1.924 1.656-4.509 2.561-7.013 2.219"/></svg>How to use the Donut icon
React
import { Icon } from "@iconify/react";
<Icon icon="flat-ui:donut" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="flat-ui:donut" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="flat-ui:donut" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[flat-ui--donut]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/flat-ui -->
<div class="i-flat-ui:donut"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="flat-ui:donut"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/flat-ui/donut.svg" alt="Donut icon" width="24" height="24">Donut icon in other icon sets
Donut icon FAQ
Is the Donut icon free for commercial use?
Yes. Flat UI Icons are released under the MIT license, which allows use in personal and commercial projects.
How do I use the Donut icon in React?
Install @iconify/react and render <Icon icon="flat-ui:donut" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Donut icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/flat-ui/donut.svg" alt="Donut icon">, or paste the SVG code inline to style it with CSS.