Add icons to this collection by clicking the heart icon.
Badge icon - also known as ribbon, medal, star, award, badge, winner, reward, and sports and competition. Created in a clean flat gradient style, perfect for web, apps, and UI projects. Available in SVG and PNG, with multiple style variants.
<svg
xmlns="http://www.w3.org/2000/svg"
width="512"
height="512"
viewBox="0 0 32 32"
>
<linearGradient
id="b"
x1="0"
x2="1"
y1="0"
y2="0"
gradientTransform="rotate(-90 20.12 4.87) scale(5.989)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#fd015c" />
<stop offset="1" stop-color="#980037" />
</linearGradient>
<linearGradient id="a">
<stop offset="0" stop-color="#fff" />
<stop offset="1" stop-color="#b3b3b3" />
</linearGradient>
<linearGradient
id="c"
x1="0"
x2="1"
y1="0"
y2="0"
gradientTransform="rotate(-90 20.407 4.405) scale(5.811)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<linearGradient
id="d"
x1="0"
x2="1"
y1="0"
y2="0"
gradientTransform="rotate(90 .127 16.48) scale(30.575)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#ffb43f" />
<stop offset="1" stop-color="#cb7c00" />
</linearGradient>
<linearGradient
id="e"
x1="0"
x2="1"
y1="0"
y2="0"
gradientTransform="rotate(90 .519 15.155) scale(21.364)"
gradientUnits="userSpaceOnUse"
>
<stop offset="0" stop-color="#f4e60b" />
<stop offset="1" stop-color="#999000" />
</linearGradient>
<linearGradient
id="f"
x1="0"
x2="1"
y1="0"
y2="0"
gradientTransform="rotate(90 2.423 13.453) scale(20.239)"
gradientUnits="userSpaceOnUse"
href="#a"
/>
<g fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<path
fill="url(#b)"
d="M21.143 20.838a.75.75 0 0 0-1.084-.672c-1.223.609-2.601.951-4.059.951s-2.836-.342-4.059-.951a.751.751 0 0 0-1.084.672v8.138c0 .646.365 1.249.972 1.562a1.924 1.924 0 0 0 1.836-.046l2.131-1.241a.407.407 0 0 1 .408 0l2.131 1.241a1.924 1.924 0 0 0 1.836.046c.607-.313.972-.916.972-1.562z"
/>
<path
fill="url(#c)"
d="M16.75 21.086a9.307 9.307 0 0 1-1.5 0v8.483l.546-.318a.407.407 0 0 1 .408 0l.546.318z"
/>
<circle cx="16" cy="11.983" r="10.634" fill="url(#d)" />
<circle cx="16" cy="11.983" r="7.524" fill="url(#e)" />
<path
fill="url(#f)"
d="M16.631 8.274a.75.75 0 0 0-1.262 0l-.965 1.503-1.728.453a.75.75 0 0 0-.39 1.2l1.132 1.383-.103 1.783a.748.748 0 0 0 1.021.742L16 14.689l1.664.649a.752.752 0 0 0 1.021-.742l-.103-1.784 1.132-1.382a.75.75 0 0 0-.39-1.2l-1.728-.453-.965-1.503z"
/>
</g>
</svg>
More icons in the same style and category