Poper icon
thesvg-color:poper
The Poper icon (thesvg-color:poper) is a free SVG icon from the theSVG Color set by thesvg.org. It is drawn on a 1200 × 1200 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
- 1200 × 1200
SVG code
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" viewBox="0 0 1200 1200"><mask id="SVGCZv6fekK" width="148" height="137" x="526" y="1063" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M526.618 1063.72h147.118V1200H526.618z"/></mask><mask id="SVGgTGA6M4z" width="893" height="1143" x="154" y="0" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M154 0h892.97v1142.35H154z"/></mask><mask id="SVGFR3kMRoD" width="73" height="24" x="564" y="1176" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M564.253 1176.54h71.848V1200h-71.848z"/></mask><mask id="SVGny25Xb7c" width="148" height="62" x="526" y="1138" maskUnits="userSpaceOnUse" style="mask-type:luminance"><path fill="#fff" d="M526.618 1138.93h147.118V1200H526.618z"/></mask><g fill="none"><path fill="#f14a16" d="M635.473 1187.57s-24.685-29.53-24.685-85.37h-21.356c0 55.84-24.698 85.37-24.698 85.37"/><g mask="url(#SVGCZv6fekK)"><path stroke="#f14a16" stroke-width="2.534" d="M635.473 1187.57s-24.685-29.53-24.685-85.37h-21.356c0 55.84-24.698 85.37-24.698 85.37"/></g><path fill="#f14a16" d="M1042.99 478.459c0 332.078-250.978 624.441-442.854 624.441c-184.511 0-442.862-265.667-442.862-624.441c-.013-262.34 180.315-475.027 442.862-475.027c262.521 0 442.854 212.674 442.854 475.027"/><g mask="url(#SVGgTGA6M4z)"><path stroke="#f14a16" stroke-width="2.534" d="M1042.99 478.459c0 332.077-250.978 624.441-442.853 624.441c-184.512 0-442.863-265.667-442.863-624.441c-.013-262.34 180.315-475.027 442.863-475.027c262.52 0 442.853 212.674 442.853 475.027Z"/></g><g mask="url(#SVGFR3kMRoD)"><path fill="#f14a16" d="M635.486 1187.57q0 .96-.682 1.92c-.454.63-1.122 1.24-2.018 1.83c-.882.6-1.978 1.16-3.261 1.71a38 38 0 0 1-4.397 1.48c-1.643.46-3.434.87-5.359 1.22c-1.938.36-3.969.66-6.121.9c-2.151.26-4.357.45-6.629.57c-2.285.13-4.584.18-6.909.18s-4.624-.05-6.896-.18a98 98 0 0 1-6.642-.57a85 85 0 0 1-6.108-.9a58 58 0 0 1-5.359-1.22a38 38 0 0 1-4.397-1.48c-1.297-.55-2.379-1.11-3.274-1.71c-.883-.59-1.564-1.2-2.019-1.83c-.441-.64-.668-1.28-.668-1.92s.227-1.29.668-1.91c.455-.64 1.136-1.26 2.019-1.85c.895-.6 1.977-1.16 3.274-1.69c1.283-.55 2.753-1.04 4.397-1.5c1.644-.45 3.421-.85 5.359-1.21a85 85 0 0 1 6.108-.91c2.151-.25 4.356-.44 6.642-.56c2.272-.12 4.571-.19 6.896-.19s4.624.07 6.909.19c2.272.12 4.478.31 6.629.56c2.152.24 4.183.55 6.121.91c1.925.36 3.716.76 5.359 1.21c1.644.46 3.101.95 4.397 1.5c1.283.53 2.379 1.09 3.261 1.69c.896.59 1.564 1.21 2.018 1.85c.455.62.682 1.27.682 1.91"/></g><g mask="url(#SVGny25Xb7c)"><path stroke="#f14a16" stroke-width="2.534" d="M635.486 1187.57q0 .96-.681 1.92c-.455.63-1.123 1.24-2.018 1.83c-.883.6-1.978 1.16-3.261 1.71a38 38 0 0 1-4.397 1.48c-1.644.45-3.435.87-5.36 1.22a85 85 0 0 1-6.121.9c-2.151.26-4.356.44-6.628.56c-2.286.14-4.584.19-6.91.19c-2.325 0-4.624-.05-6.896-.19c-2.285-.12-4.491-.3-6.642-.56a85 85 0 0 1-6.108-.9a62 62 0 0 1-5.359-1.22a38 38 0 0 1-4.397-1.48c-1.296-.55-2.379-1.11-3.274-1.71c-.882-.59-1.564-1.2-2.018-1.83c-.441-.64-.669-1.28-.669-1.92s.228-1.29.669-1.91c.454-.64 1.136-1.26 2.018-1.85c.895-.6 1.978-1.16 3.274-1.69c1.283-.55 2.753-1.04 4.397-1.5c1.644-.45 3.421-.85 5.359-1.21a85 85 0 0 1 6.108-.91c2.151-.26 4.357-.44 6.642-.56c2.272-.12 4.571-.19 6.896-.19s4.624.07 6.91.19c2.272.12 4.477.3 6.628.56c2.152.24 4.184.55 6.121.91c1.925.36 3.716.76 5.36 1.21c1.644.46 3.1.95 4.397 1.5c1.283.53 2.378 1.09 3.261 1.69c.895.59 1.563 1.21 2.018 1.85c.454.62.681 1.27.681 1.91Z"/></g><path fill="#fff" d="M616.174 76.015s321.82 168.91 247.045 737.353c0 0 163.511-265.718 84.518-484.001C861.441 90.852 616.161 76.002 616.161 76.002z"/><path fill="#fff" d="M640.161 253.895c59.045 0 106.997 19.738 143.856 59.188c36.887 39.423 55.33 90.745 55.33 153.953c0 62.714-18.056 113.408-54.153 152.083c-36.072 38.649-83.903 57.96-143.483 57.96c-66.93 0-116.085-25.08-147.438-75.267v224.145h-90.184v-568.91h90.184v72.115c31.353-50.173 79.987-75.267 145.888-75.267M529.93 562.282c23.802 25.32 54.26 37.981 91.36 37.981c37.127 0 67.585-12.661 91.361-37.981c23.802-25.347 35.71-58.133 35.71-98.344c0-39.169-11.908-71.421-35.71-96.742c-23.776-25.347-54.234-38.034-91.361-38.034c-37.1 0-67.558 12.687-91.36 38.034c-23.776 25.321-35.657 57.573-35.657 96.742c0 40.211 11.881 72.997 35.657 98.344"/></g></svg>How to use the Poper icon
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:poper" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:poper" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:poper" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--poper]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:poper"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:poper"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/thesvg-color/poper.svg" alt="Poper icon" width="24" height="24">Poper icon FAQ
Is the Poper 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 Poper icon in React?
Install @iconify/react and render <Icon icon="thesvg-color:poper" />, or use “Copy code” on this page to get a standalone React component.
How do I add the Poper icon to a web page?
Link the SVG file in an image tag: <img src="https://iconyz.com/api/public/svg/thesvg-color/poper.svg" alt="Poper icon">, or paste the SVG code inline to style it with CSS.