Sport Basketball icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.9411 21.9559C15.1782 21.7457 17.3581 20.7841 19.0711 19.0711C22.9763 15.1658 22.9763 8.83417 19.0711 4.92893C15.1658 1.02369 8.83417 1.02369 4.92893 4.92893C1.02369 8.83417 1.02369 15.1658 4.92893 19.0711C7.03831 21.1804 9.8556 22.1505 12.6161 21.9811C12.7222 21.9964 12.8329 21.989 12.9411 21.9559ZM3.57715 10.854C3.78643 9.3073 4.42146 7.80717 5.48227 6.54308L10.9392 12.0001L9.8508 13.0885C8.79932 12.2372 7.62684 11.7804 6.50965 11.4804C5.85941 11.3058 5.21389 11.1809 4.62337 11.0667L4.60668 11.0635C4.2397 10.9925 3.89736 10.926 3.57715 10.854ZM3.50818 12.374C3.77405 12.4302 4.04285 12.4822 4.3089 12.5337L4.32176 12.5361C4.92466 12.6528 5.52418 12.7689 6.12062 12.9291C7.0742 13.1852 7.98246 13.5448 8.78269 14.1566L5.48232 17.457C4.24568 15.9834 3.58763 14.189 3.50818 12.374ZM9.84663 15.214C10.5215 16.0762 10.8864 17.0204 11.144 17.9874C11.2689 18.4561 11.3651 18.9151 11.4623 19.379C11.4898 19.5101 11.5174 19.6416 11.5457 19.7739C11.5969 20.0134 11.6507 20.2552 11.7108 20.4951C9.86698 20.4327 8.03954 19.7736 6.54298 18.5176L9.84663 15.214ZM13.2397 20.4096C13.1584 20.1196 13.0861 19.8041 13.0124 19.4599C12.987 19.3411 12.9614 19.2186 12.9351 19.0933C12.8368 18.624 12.7298 18.113 12.5935 17.6012C12.2929 16.4731 11.8322 15.2642 10.9136 14.147L11.9999 13.0607L17.4569 18.5177C16.2184 19.5571 14.7532 20.1877 13.2397 20.4096ZM13.0606 12.0001L14.2716 10.789C15.3855 11.7314 16.5529 12.2483 17.6371 12.6151C18.0845 12.7665 18.5336 12.8971 18.9482 13.0177C19.1068 13.0638 19.2605 13.1085 19.4073 13.1523C19.7589 13.2575 20.0793 13.3601 20.3721 13.473C20.1217 14.9036 19.5035 16.2823 18.5176 17.4571L13.0606 12.0001ZM19.8368 11.7152C19.6683 11.6648 19.5011 11.6162 19.3352 11.5679C18.9319 11.4507 18.5325 11.3346 18.1179 11.1943C17.1737 10.8748 16.2296 10.4537 15.3367 9.72388L18.5176 6.54298C19.8221 8.09738 20.4828 10.0087 20.4997 11.9247C20.2794 11.8499 20.0574 11.7811 19.8368 11.7152ZM17.457 5.48232L14.276 8.66327C13.5459 7.7702 13.1247 6.82596 12.8052 5.88156C12.6649 5.46692 12.5487 5.0675 12.4315 4.66419L12.4311 4.6629C12.3829 4.49724 12.3346 4.33092 12.2843 4.16261C12.2184 3.94223 12.1497 3.72039 12.075 3.50033C13.991 3.51712 15.9025 4.17778 17.457 5.48232ZM11.3843 6.36232C11.7512 7.44671 12.2682 8.61432 13.2109 9.72835L11.9999 10.9394L6.54291 5.48241C7.71764 4.49654 9.09624 3.87838 10.5266 3.62793C10.6395 3.92063 10.7421 4.24076 10.8471 4.5922C10.891 4.73913 10.9358 4.89298 10.9819 5.05178C11.1025 5.46646 11.2329 5.91494 11.3843 6.36232Z" 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_basketball_24_regular.svg";

Details