Sport Hockey icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M17.4891 6.87145C17.5559 6.46266 17.2787 6.0771 16.8699 6.01028C16.452 5.94197 16.0793 6.24404 16.0052 6.64881C16.0017 6.66722 15.9958 6.69729 15.987 6.73817C15.9694 6.81997 15.9403 6.94491 15.8959 7.10628C15.8071 7.42922 15.6577 7.89671 15.4187 8.45557C14.9405 9.57376 14.1068 11.0507 12.6874 12.4701C11.2665 13.891 9.73124 14.7819 8.54893 15.3172C7.95876 15.5845 7.45992 15.7616 7.11249 15.871C6.93891 15.9257 6.80351 15.9634 6.71388 15.9868C6.66908 15.9986 6.63575 16.0067 6.61485 16.0117L6.59295 16.0168L6.59044 16.0174L6.5893 16.0176C6.1851 16.1057 5.92842 16.5045 6.01588 16.909C6.15825 17.5675 6.90744 17.4835 6.90744 17.4835L6.90993 17.483L6.9137 17.4821L6.925 17.4796L6.9624 17.4709C6.99377 17.4634 7.0379 17.4526 7.0938 17.4379C7.20559 17.4086 7.36463 17.3643 7.56311 17.3018C7.95983 17.1768 8.51568 16.9789 9.16769 16.6837C10.4698 16.0941 12.1688 15.11 13.748 13.5308C15.3286 11.9502 16.2605 10.3022 16.7979 9.04535C17.0667 8.4167 17.2377 7.8842 17.3422 7.50401C17.3945 7.31382 17.4303 7.16141 17.4535 7.05376C17.465 6.99992 17.4735 6.95723 17.4793 6.92657L17.486 6.88968L17.488 6.87819L17.4887 6.87422L17.4889 6.87269L17.4891 6.87145ZM2.35169 12.5732C1.66769 14.4715 1.57716 16.447 2.79034 17.6721L2.78947 17.6729L3.02363 17.91C3.17631 18.0644 3.40017 18.2906 3.68512 18.5779C4.25502 19.1524 5.06933 19.9713 6.04729 20.9493C7.32709 22.2291 9.35203 22.2501 11.3358 21.6093C13.3623 20.9547 15.5861 19.5482 17.5619 17.5724C19.5378 15.5965 20.9442 13.3728 21.5988 11.3462C22.2396 9.36249 22.2186 7.33755 20.9388 6.05775C20.4213 5.54024 19.6082 4.72101 18.9236 4.0303C18.5814 3.68513 18.2717 3.37236 18.0475 3.14589L17.6848 2.77934L17.6827 2.78142C16.4577 1.56735 14.4817 1.65777 12.583 2.34193C10.6178 3.05001 8.43424 4.48489 6.46445 6.45468C4.49466 8.42447 3.05978 10.608 2.35169 12.5732ZM3.76288 13.0817C4.38073 11.367 5.6756 9.36485 7.52511 7.51534C9.37461 5.66584 11.3767 4.37096 13.0914 3.75311C14.8675 3.11316 16.0601 3.28012 16.6318 3.85182L16.6338 3.84981L16.9815 4.20116C17.2059 4.42779 17.5158 4.74079 17.8582 5.08625C18.5427 5.77679 19.358 6.59824 19.8782 7.11841C20.5527 7.79289 20.7529 9.08529 20.1714 10.8851C19.6039 12.6422 18.3447 14.6683 16.5013 16.5117C14.6578 18.3552 12.6317 19.6144 10.8747 20.1819C9.07482 20.7633 7.78243 20.5631 7.10795 19.8886C6.13164 18.9123 5.31878 18.0948 4.75008 17.5215C4.46573 17.2348 4.24244 17.0092 4.09029 16.8553L3.86071 16.6229L3.86159 16.622C3.28988 16.0503 3.12293 14.8577 3.76288 13.0817Z" 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_hockey_24_regular.svg";

Details