popcorn icon

popcorn from Phosphor by Phosphor Icons · Regular · MIT Free for personal and commercial use.

Name: popcorn
Set: Phosphor
Style: Regular
Viewbox: 256×256
License: MIT

5 other variants in Phosphor

popcorn-bold popcorn-duotone popcorn-fill popcorn-light popcorn-thin

The same icon in other sets

popcornEmoji One (Colored)popcornFluent Emoji popcornFluent Emoji Flat popcornFluent Emoji High Contrast popcornHuge Icons popcornIconPark popcornIconPark Outline popcornIconPark Solid popcornIconPark TwoTone popcornLucide popcornMaterial Design Icons popcornNoto Emoji popcornOpenMoji popcornTwitter Emoji

Use the popcorn icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M229.52 74.21a8 8 0 0 0-7.13-2A44 44 0 0 0 168 41.67a44 44 0 0 0-80 0a44 44 0 0 0-54.4 30.51a8 8 0 0 0-9.4 9.65l30.56 129.84A16 16 0 0 0 70.34 224h115.32a16 16 0 0 0 15.58-12.33l30.55-129.84a8 8 0 0 0-2.27-7.62M76 56a27.7 27.7 0 0 1 13.11 3.26a8 8 0 0 0 11.56-5.34a28 28 0 0 1 54.66 0a8 8 0 0 0 11.56 5.34A28 28 0 0 1 207 76.54l-38.56 11l-34.49-13.8a16 16 0 0 0-11.88 0l-34.5 13.82L49 76.54A28 28 0 0 1 76 56m-5.66 152L42.91 91.44l37.85 10.81L94.86 208Zm74.66 0h-34L96.75 101.12L128 88.62l31.25 12.5Zm40.66 0h-24.52l14.1-105.75l37.85-10.81Z"/></svg>

React

import type { SVGProps } from "react";

export function PhPopcorn(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M229.52 74.21a8 8 0 0 0-7.13-2A44 44 0 0 0 168 41.67a44 44 0 0 0-80 0a44 44 0 0 0-54.4 30.51a8 8 0 0 0-9.4 9.65l30.56 129.84A16 16 0 0 0 70.34 224h115.32a16 16 0 0 0 15.58-12.33l30.55-129.84a8 8 0 0 0-2.27-7.62M76 56a27.7 27.7 0 0 1 13.11 3.26a8 8 0 0 0 11.56-5.34a28 28 0 0 1 54.66 0a8 8 0 0 0 11.56 5.34A28 28 0 0 1 207 76.54l-38.56 11l-34.49-13.8a16 16 0 0 0-11.88 0l-34.5 13.82L49 76.54A28 28 0 0 1 76 56m-5.66 152L42.91 91.44l37.85 10.81L94.86 208Zm74.66 0h-34L96.75 101.12L128 88.62l31.25 12.5Zm40.66 0h-24.52l14.1-105.75l37.85-10.81Z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 256 256"><path fill="currentColor" d="M229.52 74.21a8 8 0 0 0-7.13-2A44 44 0 0 0 168 41.67a44 44 0 0 0-80 0a44 44 0 0 0-54.4 30.51a8 8 0 0 0-9.4 9.65l30.56 129.84A16 16 0 0 0 70.34 224h115.32a16 16 0 0 0 15.58-12.33l30.55-129.84a8 8 0 0 0-2.27-7.62M76 56a27.7 27.7 0 0 1 13.11 3.26a8 8 0 0 0 11.56-5.34a28 28 0 0 1 54.66 0a8 8 0 0 0 11.56 5.34A28 28 0 0 1 207 76.54l-38.56 11l-34.49-13.8a16 16 0 0 0-11.88 0l-34.5 13.82L49 76.54A28 28 0 0 1 76 56m-5.66 152L42.91 91.44l37.85 10.81L94.86 208Zm74.66 0h-34L96.75 101.12L128 88.62l31.25 12.5Zm40.66 0h-24.52l14.1-105.75l37.85-10.81Z"/></svg>
</template>

CSS

.icon-popcorn {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M229.52%2074.21a8%208%200%200%200-7.13-2A44%2044%200%200%200%20168%2041.67a44%2044%200%200%200-80%200a44%2044%200%200%200-54.4%2030.51a8%208%200%200%200-9.4%209.65l30.56%20129.84A16%2016%200%200%200%2070.34%20224h115.32a16%2016%200%200%200%2015.58-12.33l30.55-129.84a8%208%200%200%200-2.27-7.62M76%2056a27.7%2027.7%200%200%201%2013.11%203.26a8%208%200%200%200%2011.56-5.34a28%2028%200%200%201%2054.66%200a8%208%200%200%200%2011.56%205.34A28%2028%200%200%201%20207%2076.54l-38.56%2011l-34.49-13.8a16%2016%200%200%200-11.88%200l-34.5%2013.82L49%2076.54A28%2028%200%200%201%2076%2056m-5.66%20152L42.91%2091.44l37.85%2010.81L94.86%20208Zm74.66%200h-34L96.75%20101.12L128%2088.62l31.25%2012.5Zm40.66%200h-24.52l14.1-105.75l37.85-10.81Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M229.52%2074.21a8%208%200%200%200-7.13-2A44%2044%200%200%200%20168%2041.67a44%2044%200%200%200-80%200a44%2044%200%200%200-54.4%2030.51a8%208%200%200%200-9.4%209.65l30.56%20129.84A16%2016%200%200%200%2070.34%20224h115.32a16%2016%200%200%200%2015.58-12.33l30.55-129.84a8%208%200%200%200-2.27-7.62M76%2056a27.7%2027.7%200%200%201%2013.11%203.26a8%208%200%200%200%2011.56-5.34a28%2028%200%200%201%2054.66%200a8%208%200%200%200%2011.56%205.34A28%2028%200%200%201%20207%2076.54l-38.56%2011l-34.49-13.8a16%2016%200%200%200-11.88%200l-34.5%2013.82L49%2076.54A28%2028%200%200%201%2076%2056m-5.66%20152L42.91%2091.44l37.85%2010.81L94.86%20208Zm74.66%200h-34L96.75%20101.12L128%2088.62l31.25%2012.5Zm40.66%200h-24.52l14.1-105.75l37.85-10.81Z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ph/popcorn.svg?color=%231a73e8&size=48