Hpi icon
grommet-icons:hpi
The Hpi icon (grommet-icons:hpi) is a free SVG icon from the Grommet Icons set by Grommet. It is drawn on a 24 × 24 grid. Grommet Icons are released under the Apache 2.0 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
- Grommet Icons
- Author
- Grommet
- License
- Apache-2.0
- Size
- 24 × 24
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.793 15.333a.5.5 0 0 0 .442-.315l2.196-6.37c.06-.173-.04-.315-.225-.315h-1a.5.5 0 0 0-.443.315l-2.206 6.37c-.06.174.041.315.225.315zM24 12c0 6.627-5.373 12-12 12c-.183 0-.36-.02-.542-.027l2.42-6.991a.5.5 0 0 1 .443-.315H16c2.607 0 2.631-.865 2.906-1.66c.642-1.862 1.75-5.073 1.964-5.701C21.178 8.41 21.28 7 19.001 7H15a.5.5 0 0 0-.443.315L8.925 23.587C3.79 22.227 0 17.562 0 12C0 6.694 3.448 2.2 8.223.615L2.776 16.351c-.06.174.04.316.224.316h2a.5.5 0 0 0 .443-.316l2.666-7.703a.5.5 0 0 1 .442-.315h.989c.183 0 .284.142.224.315l-2.656 7.703c-.059.174.042.316.225.316h2a.5.5 0 0 0 .442-.316l2.427-7.036C12.765 7.682 12.312 7 10.346 7H9.013c-.183 0-.284-.142-.224-.315L11.086.046C11.39.023 11.691 0 12 0c6.627 0 12 5.373 12 12"/></svg>How to use the Hpi icon
React
import { Icon } from "@iconify/react";
<Icon icon="grommet-icons:hpi" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="grommet-icons:hpi" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="grommet-icons:hpi" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[grommet-icons--hpi]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/grommet-icons -->
<div class="i-grommet-icons:hpi"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="grommet-icons:hpi"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/grommet-icons/hpi.svg" alt="Hpi icon" width="24" height="24">Hpi icon FAQ
Is the Hpi icon free for commercial use?
Yes. Grommet Icons are released under the Apache 2.0 license, which allows use in personal and commercial projects.
How do I use the Hpi icon in React?
Install @iconify/react and render <Icon icon="grommet-icons:hpi" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Hpi icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/grommet-icons/hpi.svg" alt="Hpi icon">, or paste the SVG code inline to style it with CSS.