sport icon

sport-16 from Fluent UI System Color Icons by Microsoft Corporation · 16 · MIT Free for personal and commercial use.

Name: sport-16
Set: Fluent UI System Color Icons
Style: 16
Viewbox: 16×16
License: MIT

2 other variants in Fluent UI System Color Icons

The same icon in other sets

sport-16-filledFluent UI System Icons sportIconPark sportIconPark Outline sportIconPark Solid sportIconPark TwoTone

Use the sport icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><circle cx="9.5" cy="6.5" r="5.5" fill="url(#SVG19cmvcDN)"/><circle cx="9.5" cy="6.5" r="5.5" fill="url(#SVGGAmDGd8V)" fill-opacity=".8"/><path fill="url(#SVGKo6NMdAU)" d="M6.239 2.07L9.73 5.563l.825-.824A3 3 0 0 1 10 3c0-.71.247-1.363.66-1.877a5.5 5.5 0 0 1 1.057.342a1.996 1.996 0 0 0-.44 2.551l1.743-1.743q.385.322.707.707l-1.743 1.743a1.996 1.996 0 0 0 2.55-.44q.224.505.344 1.057A3 3 0 0 1 13 6a3 3 0 0 1-1.738-.555l-.824.825l3.491 3.491q-.299.405-.665.75L9.73 6.976L6.854 9.854l-.708-.708L9.023 6.27L5.49 2.736a5.5 5.5 0 0 1 .749-.665" opacity=".6"/><path fill="url(#SVGQqvvkdDX)" d="M2.5 6A1.5 1.5 0 0 0 1 7.5v1A6.5 6.5 0 0 0 7.5 15h1a1.5 1.5 0 0 0 1.5-1.5v-1A6.5 6.5 0 0 0 3.5 6z"/><path fill="url(#SVGhIR6ueCb)" fill-opacity=".9" d="M2.5 6A1.5 1.5 0 0 0 1 7.5v1A6.5 6.5 0 0 0 7.5 15h1a1.5 1.5 0 0 0 1.5-1.5v-1A6.5 6.5 0 0 0 3.5 6z"/><path fill="#ffc470" d="M5.104 9.396a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708-.708z"/><defs><radialGradient id="SVG19cmvcDN" cx="0" cy="0" r="1" gradientTransform="rotate(-90 14.355 3.374)scale(19.2202)" gradientUnits="userSpaceOnUse"><stop stop-color="#eb4824"/><stop offset=".978" stop-color="#ff921f"/></radialGradient><radialGradient id="SVGGAmDGd8V" cx="0" cy="0" r="1" gradientTransform="rotate(-45 15.513 -1.176)scale(6.48181 8.86748)" gradientUnits="userSpaceOnUse"><stop offset=".588" stop-color="#aa1d2d"/><stop offset=".931" stop-color="#eb4824" stop-opacity=".1"/></radialGradient><radialGradient id="SVGQqvvkdDX" cx="0" cy="0" r="1" gradientTransform="rotate(53.53 -5.444 5.007)scale(11.7003 10.5803)" gradientUnits="userSpaceOnUse"><stop offset=".24" stop-color="#ae5606"/><stop offset="1" stop-color="#944600"/></radialGradient><radialGradient id="SVGhIR6ueCb" cx="0" cy="0" r="1" gradientTransform="rotate(10.938 -88.628 31.08)scale(13.3182)" gradientUnits="userSpaceOnUse"><stop offset=".626" stop-color="#ffa43d" stop-opacity="0"/><stop offset=".927" stop-color="#ffa43d"/></radialGradient><linearGradient id="SVGKo6NMdAU" x1="13.66" x2="7.761" y1="2.51" y2="8.408" gradientUnits="userSpaceOnUse"><stop offset=".713" stop-color="#8e250b"/><stop offset=".903" stop-color="#8e250b" stop-opacity="0"/></linearGradient></defs></g></svg>

React

import type { SVGProps } from "react";

export function FluentColorSport16(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><circle cx="9.5" cy="6.5" r="5.5" fill="url(#SVG19cmvcDN)"/><circle cx="9.5" cy="6.5" r="5.5" fill="url(#SVGGAmDGd8V)" fillOpacity=".8"/><path fill="url(#SVGKo6NMdAU)" d="M6.239 2.07L9.73 5.563l.825-.824A3 3 0 0 1 10 3c0-.71.247-1.363.66-1.877a5.5 5.5 0 0 1 1.057.342a1.996 1.996 0 0 0-.44 2.551l1.743-1.743q.385.322.707.707l-1.743 1.743a1.996 1.996 0 0 0 2.55-.44q.224.505.344 1.057A3 3 0 0 1 13 6a3 3 0 0 1-1.738-.555l-.824.825l3.491 3.491q-.299.405-.665.75L9.73 6.976L6.854 9.854l-.708-.708L9.023 6.27L5.49 2.736a5.5 5.5 0 0 1 .749-.665" opacity=".6"/><path fill="url(#SVGQqvvkdDX)" d="M2.5 6A1.5 1.5 0 0 0 1 7.5v1A6.5 6.5 0 0 0 7.5 15h1a1.5 1.5 0 0 0 1.5-1.5v-1A6.5 6.5 0 0 0 3.5 6z"/><path fill="url(#SVGhIR6ueCb)" fillOpacity=".9" d="M2.5 6A1.5 1.5 0 0 0 1 7.5v1A6.5 6.5 0 0 0 7.5 15h1a1.5 1.5 0 0 0 1.5-1.5v-1A6.5 6.5 0 0 0 3.5 6z"/><path fill="#ffc470" d="M5.104 9.396a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708-.708z"/><defs><radialGradient id="SVG19cmvcDN" cx="0" cy="0" r="1" gradientTransform="rotate(-90 14.355 3.374)scale(19.2202)" gradientUnits="userSpaceOnUse"><stop stopColor="#eb4824"/><stop offset=".978" stopColor="#ff921f"/></radialGradient><radialGradient id="SVGGAmDGd8V" cx="0" cy="0" r="1" gradientTransform="rotate(-45 15.513 -1.176)scale(6.48181 8.86748)" gradientUnits="userSpaceOnUse"><stop offset=".588" stopColor="#aa1d2d"/><stop offset=".931" stopColor="#eb4824" stopOpacity=".1"/></radialGradient><radialGradient id="SVGQqvvkdDX" cx="0" cy="0" r="1" gradientTransform="rotate(53.53 -5.444 5.007)scale(11.7003 10.5803)" gradientUnits="userSpaceOnUse"><stop offset=".24" stopColor="#ae5606"/><stop offset="1" stopColor="#944600"/></radialGradient><radialGradient id="SVGhIR6ueCb" cx="0" cy="0" r="1" gradientTransform="rotate(10.938 -88.628 31.08)scale(13.3182)" gradientUnits="userSpaceOnUse"><stop offset=".626" stopColor="#ffa43d" stopOpacity="0"/><stop offset=".927" stopColor="#ffa43d"/></radialGradient><linearGradient id="SVGKo6NMdAU" x1="13.66" x2="7.761" y1="2.51" y2="8.408" gradientUnits="userSpaceOnUse"><stop offset=".713" stopColor="#8e250b"/><stop offset=".903" stopColor="#8e250b" stopOpacity="0"/></linearGradient></defs></g></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><g fill="none"><circle cx="9.5" cy="6.5" r="5.5" fill="url(#SVG19cmvcDN)"/><circle cx="9.5" cy="6.5" r="5.5" fill="url(#SVGGAmDGd8V)" fill-opacity=".8"/><path fill="url(#SVGKo6NMdAU)" d="M6.239 2.07L9.73 5.563l.825-.824A3 3 0 0 1 10 3c0-.71.247-1.363.66-1.877a5.5 5.5 0 0 1 1.057.342a1.996 1.996 0 0 0-.44 2.551l1.743-1.743q.385.322.707.707l-1.743 1.743a1.996 1.996 0 0 0 2.55-.44q.224.505.344 1.057A3 3 0 0 1 13 6a3 3 0 0 1-1.738-.555l-.824.825l3.491 3.491q-.299.405-.665.75L9.73 6.976L6.854 9.854l-.708-.708L9.023 6.27L5.49 2.736a5.5 5.5 0 0 1 .749-.665" opacity=".6"/><path fill="url(#SVGQqvvkdDX)" d="M2.5 6A1.5 1.5 0 0 0 1 7.5v1A6.5 6.5 0 0 0 7.5 15h1a1.5 1.5 0 0 0 1.5-1.5v-1A6.5 6.5 0 0 0 3.5 6z"/><path fill="url(#SVGhIR6ueCb)" fill-opacity=".9" d="M2.5 6A1.5 1.5 0 0 0 1 7.5v1A6.5 6.5 0 0 0 7.5 15h1a1.5 1.5 0 0 0 1.5-1.5v-1A6.5 6.5 0 0 0 3.5 6z"/><path fill="#ffc470" d="M5.104 9.396a.5.5 0 1 0-.708.708l1.5 1.5a.5.5 0 0 0 .708-.708z"/><defs><radialGradient id="SVG19cmvcDN" cx="0" cy="0" r="1" gradientTransform="rotate(-90 14.355 3.374)scale(19.2202)" gradientUnits="userSpaceOnUse"><stop stop-color="#eb4824"/><stop offset=".978" stop-color="#ff921f"/></radialGradient><radialGradient id="SVGGAmDGd8V" cx="0" cy="0" r="1" gradientTransform="rotate(-45 15.513 -1.176)scale(6.48181 8.86748)" gradientUnits="userSpaceOnUse"><stop offset=".588" stop-color="#aa1d2d"/><stop offset=".931" stop-color="#eb4824" stop-opacity=".1"/></radialGradient><radialGradient id="SVGQqvvkdDX" cx="0" cy="0" r="1" gradientTransform="rotate(53.53 -5.444 5.007)scale(11.7003 10.5803)" gradientUnits="userSpaceOnUse"><stop offset=".24" stop-color="#ae5606"/><stop offset="1" stop-color="#944600"/></radialGradient><radialGradient id="SVGhIR6ueCb" cx="0" cy="0" r="1" gradientTransform="rotate(10.938 -88.628 31.08)scale(13.3182)" gradientUnits="userSpaceOnUse"><stop offset=".626" stop-color="#ffa43d" stop-opacity="0"/><stop offset=".927" stop-color="#ffa43d"/></radialGradient><linearGradient id="SVGKo6NMdAU" x1="13.66" x2="7.761" y1="2.51" y2="8.408" gradientUnits="userSpaceOnUse"><stop offset=".713" stop-color="#8e250b"/><stop offset=".903" stop-color="#8e250b" stop-opacity="0"/></linearGradient></defs></g></svg>
</template>

CSS

.icon-sport-16 {
  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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%226.5%22%20r%3D%225.5%22%20fill%3D%22url(%23SVG19cmvcDN)%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%226.5%22%20r%3D%225.5%22%20fill%3D%22url(%23SVGGAmDGd8V)%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGKo6NMdAU)%22%20d%3D%22M6.239%202.07L9.73%205.563l.825-.824A3%203%200%200%201%2010%203c0-.71.247-1.363.66-1.877a5.5%205.5%200%200%201%201.057.342a1.996%201.996%200%200%200-.44%202.551l1.743-1.743q.385.322.707.707l-1.743%201.743a1.996%201.996%200%200%200%202.55-.44q.224.505.344%201.057A3%203%200%200%201%2013%206a3%203%200%200%201-1.738-.555l-.824.825l3.491%203.491q-.299.405-.665.75L9.73%206.976L6.854%209.854l-.708-.708L9.023%206.27L5.49%202.736a5.5%205.5%200%200%201%20.749-.665%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGQqvvkdDX)%22%20d%3D%22M2.5%206A1.5%201.5%200%200%200%201%207.5v1A6.5%206.5%200%200%200%207.5%2015h1a1.5%201.5%200%200%200%201.5-1.5v-1A6.5%206.5%200%200%200%203.5%206z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhIR6ueCb)%22%20fill-opacity%3D%22.9%22%20d%3D%22M2.5%206A1.5%201.5%200%200%200%201%207.5v1A6.5%206.5%200%200%200%207.5%2015h1a1.5%201.5%200%200%200%201.5-1.5v-1A6.5%206.5%200%200%200%203.5%206z%22%2F%3E%3Cpath%20fill%3D%22%23ffc470%22%20d%3D%22M5.104%209.396a.5.5%200%201%200-.708.708l1.5%201.5a.5.5%200%200%200%20.708-.708z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVG19cmvcDN%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-90%2014.355%203.374)scale(19.2202)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23eb4824%22%2F%3E%3Cstop%20offset%3D%22.978%22%20stop-color%3D%22%23ff921f%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGGAmDGd8V%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-45%2015.513%20-1.176)scale(6.48181%208.86748)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.588%22%20stop-color%3D%22%23aa1d2d%22%2F%3E%3Cstop%20offset%3D%22.931%22%20stop-color%3D%22%23eb4824%22%20stop-opacity%3D%22.1%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGQqvvkdDX%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(53.53%20-5.444%205.007)scale(11.7003%2010.5803)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23ae5606%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23944600%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGhIR6ueCb%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(10.938%20-88.628%2031.08)scale(13.3182)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.626%22%20stop-color%3D%22%23ffa43d%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.927%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGKo6NMdAU%22%20x1%3D%2213.66%22%20x2%3D%227.761%22%20y1%3D%222.51%22%20y2%3D%228.408%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.713%22%20stop-color%3D%22%238e250b%22%2F%3E%3Cstop%20offset%3D%22.903%22%20stop-color%3D%22%238e250b%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%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%2016%2016%22%3E%3Cg%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%226.5%22%20r%3D%225.5%22%20fill%3D%22url(%23SVG19cmvcDN)%22%2F%3E%3Ccircle%20cx%3D%229.5%22%20cy%3D%226.5%22%20r%3D%225.5%22%20fill%3D%22url(%23SVGGAmDGd8V)%22%20fill-opacity%3D%22.8%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGKo6NMdAU)%22%20d%3D%22M6.239%202.07L9.73%205.563l.825-.824A3%203%200%200%201%2010%203c0-.71.247-1.363.66-1.877a5.5%205.5%200%200%201%201.057.342a1.996%201.996%200%200%200-.44%202.551l1.743-1.743q.385.322.707.707l-1.743%201.743a1.996%201.996%200%200%200%202.55-.44q.224.505.344%201.057A3%203%200%200%201%2013%206a3%203%200%200%201-1.738-.555l-.824.825l3.491%203.491q-.299.405-.665.75L9.73%206.976L6.854%209.854l-.708-.708L9.023%206.27L5.49%202.736a5.5%205.5%200%200%201%20.749-.665%22%20opacity%3D%22.6%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGQqvvkdDX)%22%20d%3D%22M2.5%206A1.5%201.5%200%200%200%201%207.5v1A6.5%206.5%200%200%200%207.5%2015h1a1.5%201.5%200%200%200%201.5-1.5v-1A6.5%206.5%200%200%200%203.5%206z%22%2F%3E%3Cpath%20fill%3D%22url(%23SVGhIR6ueCb)%22%20fill-opacity%3D%22.9%22%20d%3D%22M2.5%206A1.5%201.5%200%200%200%201%207.5v1A6.5%206.5%200%200%200%207.5%2015h1a1.5%201.5%200%200%200%201.5-1.5v-1A6.5%206.5%200%200%200%203.5%206z%22%2F%3E%3Cpath%20fill%3D%22%23ffc470%22%20d%3D%22M5.104%209.396a.5.5%200%201%200-.708.708l1.5%201.5a.5.5%200%200%200%20.708-.708z%22%2F%3E%3Cdefs%3E%3CradialGradient%20id%3D%22SVG19cmvcDN%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-90%2014.355%203.374)scale(19.2202)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%23eb4824%22%2F%3E%3Cstop%20offset%3D%22.978%22%20stop-color%3D%22%23ff921f%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGGAmDGd8V%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(-45%2015.513%20-1.176)scale(6.48181%208.86748)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.588%22%20stop-color%3D%22%23aa1d2d%22%2F%3E%3Cstop%20offset%3D%22.931%22%20stop-color%3D%22%23eb4824%22%20stop-opacity%3D%22.1%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGQqvvkdDX%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(53.53%20-5.444%205.007)scale(11.7003%2010.5803)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.24%22%20stop-color%3D%22%23ae5606%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23944600%22%2F%3E%3C%2FradialGradient%3E%3CradialGradient%20id%3D%22SVGhIR6ueCb%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22rotate(10.938%20-88.628%2031.08)scale(13.3182)%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.626%22%20stop-color%3D%22%23ffa43d%22%20stop-opacity%3D%220%22%2F%3E%3Cstop%20offset%3D%22.927%22%20stop-color%3D%22%23ffa43d%22%2F%3E%3C%2FradialGradient%3E%3ClinearGradient%20id%3D%22SVGKo6NMdAU%22%20x1%3D%2213.66%22%20x2%3D%227.761%22%20y1%3D%222.51%22%20y2%3D%228.408%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%22.713%22%20stop-color%3D%22%238e250b%22%2F%3E%3Cstop%20offset%3D%22.903%22%20stop-color%3D%22%238e250b%22%20stop-opacity%3D%220%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

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