medal icon

medal from Element Plus by Element Plus · Outline · MIT Free for personal and commercial use.

Name: medal
Set: Element Plus
Style: Outline
Viewbox: 1024×1024
License: MIT

The same icon in other sets

medalBoxIcons v2 medalBoxIcons v2 Solid medalFont Awesome 6 Solid medalFont Awesome Solid medal-16-filledFluent UI System Icons medalIconoir medalIonIcons medalJam Icons medalLine Awesome medalLucide medalMaterial Design Icons medal-fillMingCute Icon medalPhosphor medal-fillRemix Icon medalTabler Icons medalUnicons

Use the medal icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 896a256 256 0 1 0 0-512a256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640"/><path fill="currentColor" d="M576 128H448v200a287 287 0 0 1 64-8a288 288 0 0 1 64 8zm64 0v219.6q36.6 13.7 78.4 34l39-253.6zm-256 0H266.6l39 253.6a897 897 0 0 1 78.4-34zM229.3 64h565.4a32 32 0 0 1 31.6 36.9L768 480q-170.7-96-256-96c-85.3 0-142.2 32-256 96l-58.3-379.1A32 32 0 0 1 229.3 64"/></svg>

React

import type { SVGProps } from "react";

export function EpMedal(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 896a256 256 0 1 0 0-512a256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640"/><path fill="currentColor" d="M576 128H448v200a287 287 0 0 1 64-8a288 288 0 0 1 64 8zm64 0v219.6q36.6 13.7 78.4 34l39-253.6zm-256 0H266.6l39 253.6a897 897 0 0 1 78.4-34zM229.3 64h565.4a32 32 0 0 1 31.6 36.9L768 480q-170.7-96-256-96c-85.3 0-142.2 32-256 96l-58.3-379.1A32 32 0 0 1 229.3 64"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 896a256 256 0 1 0 0-512a256 256 0 0 0 0 512m0 64a320 320 0 1 1 0-640a320 320 0 0 1 0 640"/><path fill="currentColor" d="M576 128H448v200a287 287 0 0 1 64-8a288 288 0 0 1 64 8zm64 0v219.6q36.6 13.7 78.4 34l39-253.6zm-256 0H266.6l39 253.6a897 897 0 0 1 78.4-34zM229.3 64h565.4a32 32 0 0 1 31.6 36.9L768 480q-170.7-96-256-96c-85.3 0-142.2 32-256 96l-58.3-379.1A32 32 0 0 1 229.3 64"/></svg>
</template>

CSS

.icon-medal {
  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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20896a256%20256%200%201%200%200-512a256%20256%200%200%200%200%20512m0%2064a320%20320%200%201%201%200-640a320%20320%200%200%201%200%20640%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M576%20128H448v200a287%20287%200%200%201%2064-8a288%20288%200%200%201%2064%208zm64%200v219.6q36.6%2013.7%2078.4%2034l39-253.6zm-256%200H266.6l39%20253.6a897%20897%200%200%201%2078.4-34zM229.3%2064h565.4a32%2032%200%200%201%2031.6%2036.9L768%20480q-170.7-96-256-96c-85.3%200-142.2%2032-256%2096l-58.3-379.1A32%2032%200%200%201%20229.3%2064%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%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M512%20896a256%20256%200%201%200%200-512a256%20256%200%200%200%200%20512m0%2064a320%20320%200%201%201%200-640a320%20320%200%200%201%200%20640%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M576%20128H448v200a287%20287%200%200%201%2064-8a288%20288%200%200%201%2064%208zm64%200v219.6q36.6%2013.7%2078.4%2034l39-253.6zm-256%200H266.6l39%20253.6a897%20897%200%200%201%2078.4-34zM229.3%2064h565.4a32%2032%200%200%201%2031.6%2036.9L768%20480q-170.7-96-256-96c-85.3%200-142.2%2032-256%2096l-58.3-379.1A32%2032%200%200%201%20229.3%2064%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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