Sugar icon

ep:sugar

The Sugar icon (ep:sugar) is a free SVG icon from the Element Plus set. It is drawn on a 1024 × 1024 grid. Element Plus 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: Element Plus
Author: Element Plus
License: MIT
Size: 1024 × 1024

Download SVG

SVG code

<svg xmlns="http://www.w3.org/2000/svg" width="1024" height="1024" viewBox="0 0 1024 1024"><path fill="currentColor" d="m801.7 349.2l4.5 4.5a128 128 0 0 1 0 181L534.7 806a128 128 0 0 1-181.1 0l-4.5-4.4l-19.4 109.7a64 64 0 0 1-108.3 34.1l-143-143a64 64 0 0 1 34.2-108.2l109.8-19.4l-4.5-4.5a128 128 0 0 1 0-181l271.4-271.5a128 128 0 0 1 181.1 0l4.5 4.4l19.4-109.5a64 64 0 0 1 108.3-34l142.6 143A64 64 0 0 1 911 330zM253 547.9h447.2v2.2l60.8-60.8a64 64 0 0 0 18.7-44.4H352.8L263 534.7a64 64 0 0 0-10.2 13.2zm0 64q4.2 7.1 10.2 13.3l135.7 135.7a64 64 0 0 0 90.5 0l149.1-149zm490-231L625.3 263.1a64 64 0 0 0-90.5 0l-118 117.8zM123.8 757.3l143 143L291 762.7a25.6 25.6 0 0 0-29.7-29.6zM757.3 124L733 261.4a25.6 25.6 0 0 0 29.6 29.7L900 267z"/></svg>

How to use the Sugar icon

React

import { Icon } from "@iconify/react";

<Icon icon="ep:sugar" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="ep:sugar" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="ep:sugar" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[ep--sugar]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/ep -->
<div class="i-ep:sugar"></div>

Web component

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="ep:sugar"></iconify-icon>

HTML image

<img src="https://iconyz.com/api/public/svg/ep/sugar.svg" alt="Sugar icon" width="24" height="24">

Sugar icon in other icon sets

Sugar icon FAQ

Is the Sugar icon free for commercial use?

Yes. Element Plus icons are released under the MIT license, which allows use in personal and commercial projects.

How do I use the Sugar icon in React?

Install @iconify/react and render <Icon icon="ep:sugar" />, or use “Copy code” on this page to get a standalone React component.

How do I add the Sugar icon to a web page?

Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/ep/sugar.svg" alt="Sugar icon">, or paste the SVG code inline to style it with CSS.

Browse all Element Plus icons →