Sport icon

Use the Sport 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 { Sport24Regular, Sport24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M18.0353 15.096C17.4023 15.5979 16.6737 15.9844 15.8811 16.2236C15.9592 16.7203 15.9998 17.2294 15.9999 17.748C19.4504 16.8599 21.9999 13.7277 21.9999 10C21.9999 9.35266 21.923 8.72328 21.7779 8.12048C21.6044 7.39981 21.3333 6.71712 20.9794 6.08722C20.2589 4.80467 19.1951 3.74093 17.9125 3.02041C17.2826 2.66653 16.6 2.39544 15.8794 2.22192C15.2766 2.07681 14.6472 2 13.9999 2C10.2722 2 7.14004 4.54955 6.25195 8C6.77053 8.00011 7.27964 8.0407 7.77631 8.11879C8.01554 7.32626 8.40201 6.59762 8.90391 5.96465L18.0353 15.096ZM19.0959 14.0353L15.0606 10L15.822 9.23859C16.5103 9.71849 17.3472 9.99991 18.2499 9.99991C19.0637 9.99991 19.8241 9.77119 20.4702 9.37454C20.4899 9.58037 20.4999 9.78901 20.4999 10C20.4999 11.5247 19.975 12.9268 19.0959 14.0353ZM16.2239 3.89042C16.8843 4.13086 17.4947 4.47532 18.0353 4.90399L15.8484 7.09083C15.6265 6.69414 15.4999 6.2368 15.4999 5.74991C15.4999 5.03289 15.7743 4.37996 16.2239 3.89042ZM14.7613 8.17794L13.9999 8.93934L9.96457 4.90399C11.0732 4.02496 12.4752 3.5 13.9999 3.5C14.2109 3.5 14.4195 3.51005 14.6252 3.52969C14.2286 4.17584 13.9999 4.93617 13.9999 5.74991C13.9999 6.65265 14.2814 7.48965 14.7613 8.17794ZM20.1095 7.77592C19.6199 8.22548 18.967 8.49991 18.2499 8.49991C17.7631 8.49991 17.3058 8.3734 16.9091 8.15147L19.0959 5.96465C19.5246 6.50522 19.869 7.11558 20.1095 7.77592ZM4.25 10.5C3.83579 10.5 3.5 10.8358 3.5 11.25V13.25C3.5 17.2541 6.74594 20.5 10.75 20.5H12.75C13.1642 20.5 13.5 20.1642 13.5 19.75V17.75C13.5 13.7459 10.2541 10.5 6.25 10.5H4.25ZM2 11.25C2 10.0074 3.00736 9 4.25 9H6.25C11.0825 9 15 12.9175 15 17.75V19.75C15 20.9926 13.9926 22 12.75 22H10.75C5.91751 22 2 18.0825 2 13.25V11.25ZM7.78033 13.7197C7.48744 13.4268 7.01256 13.4268 6.71967 13.7197C6.42678 14.0126 6.42678 14.4874 6.71967 14.7803L9.21967 17.2803C9.51256 17.5732 9.98744 17.5732 10.2803 17.2803C10.5732 16.9874 10.5732 16.5126 10.2803 16.2197L7.78033 13.7197Z" 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_24_regular.svg";

Details

Keywords

balleventactivityexercise