Sport Soccer icon

Use the Sport Soccer icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { SportSoccer24Regular, SportSoccer24Filled } from "@fluentui/react-icons";

export function Example() {
  return <SportSoccer24Regular aria-label="Sport Soccer" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_sport_soccer_24_regular.svg" width="24" height="24" alt="Sport Soccer">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM10.0738 3.71918C10.6927 3.57579 11.3375 3.5 12 3.5C12.6624 3.5 13.3071 3.57577 13.9259 3.7191L12.0016 4.87263L10.0738 3.71918ZM8.24434 4.37259L11.252 6.1721V8.36588L8.46062 10.3939L6.41688 9.68704L5.83031 6.15319C6.51967 5.426 7.33622 4.82059 8.24434 4.37259ZM4.58887 7.83458L4.94703 9.99236L3.51948 11.4199C3.60685 10.1236 3.98485 8.90694 4.58887 7.83458ZM3.62136 13.4394L5.94849 11.1122L7.98712 11.8174L9.06985 15.1497L8.10089 16.725L4.80714 16.5312C4.22302 15.6059 3.8125 14.56 3.62136 13.4394ZM6.09012 18.1093L7.99484 18.2214L8.67002 19.8229C7.70552 19.4119 6.83254 18.8276 6.09012 18.1093ZM10.5299 20.3733L9.34569 17.5643L10.3094 15.9974H13.6806L14.5926 17.5783L13.553 20.3585C13.0495 20.4514 12.5304 20.5 12 20.5C11.4986 20.5 11.0074 20.4566 10.5299 20.3733ZM15.3594 19.8103L15.9268 18.2931L17.5964 18.3978C16.9337 18.978 16.1799 19.457 15.3594 19.8103ZM18.892 16.9761L15.8675 16.7865L14.9302 15.1618L16.0169 11.8174L18.0296 11.1213L20.3416 13.6417C20.1016 14.8681 19.5979 16 18.892 16.9761ZM20.49 11.5845L19.0495 10.0141L19.4124 7.83686C20.0412 8.95395 20.4247 10.2275 20.49 11.5845ZM18.172 6.15558L17.5831 9.68852L15.5434 10.3939L12.752 8.36588V6.17168L15.7543 4.37191C16.6639 4.82047 17.4818 5.42696 18.172 6.15558ZM9.46674 11.5171L12.002 9.67507L14.5373 11.5171L13.5689 14.4974H10.4351L9.46674 11.5171Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/sport_soccer_24_regular.svg";

Details