Sport Baseball icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M9.93207 16.6998C9.93207 16.6998 9.18373 16.7987 9.02256 16.1541C8.9233 15.757 9.1731 15.3426 9.57014 15.2441L9.57276 15.2434L9.58019 15.2416L9.60374 15.2361C9.62326 15.2315 9.65036 15.2254 9.68466 15.2181C9.75326 15.2035 9.8508 15.184 9.9743 15.1628C10.2211 15.1202 10.5727 15.0701 11.0051 15.0369C11.8681 14.9705 13.0643 14.9701 14.3973 15.2367C14.8034 15.318 15.0668 15.7131 14.9856 16.1192C14.9044 16.5254 14.5093 16.7888 14.1031 16.7076C12.9361 16.4742 11.8823 16.4738 11.1202 16.5325C10.7401 16.5617 10.4355 16.6054 10.2292 16.6409C10.1261 16.6587 10.0479 16.6744 9.99731 16.6852C9.97552 16.6898 9.93207 16.6998 9.93207 16.6998ZM9.02232 7.89351C9.18349 7.24884 9.93183 7.34781 9.93183 7.34781C9.93183 7.34781 9.97527 7.35775 9.99707 7.3624C10.0476 7.37317 10.1259 7.38886 10.2289 7.40663C10.4352 7.4422 10.7399 7.48589 11.1199 7.51512C11.882 7.57374 12.9358 7.57338 14.1028 7.33998C14.509 7.25875 14.9041 7.52216 14.9854 7.92833C15.0666 8.3345 14.8032 8.72962 14.397 8.81085C13.064 9.07745 11.8678 9.07709 11.0049 9.01071C10.5725 8.97744 10.2209 8.92738 9.97406 8.88482C9.85056 8.86353 9.75302 8.84407 9.68442 8.82945C9.65011 8.82214 9.62301 8.81603 9.6035 8.8115L9.57995 8.80594L9.57251 8.80413L9.5699 8.80349C9.17286 8.70493 8.92305 8.29057 9.02232 7.89351ZM12 22C14.7733 22 17.283 20.871 19.0944 19.0476C19.4476 18.6921 19.7743 18.3102 20.0711 17.9052C21.2839 16.2504 22 14.2088 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22ZM5.07422 7.07101C5.61183 7.43596 6.26013 7.78607 7.01269 8.03692C7.40565 8.16791 7.83039 7.95554 7.96137 7.56258C8.09236 7.16962 7.87999 6.74488 7.48703 6.6139C6.94663 6.43376 6.46825 6.18758 6.05711 5.92282C7.58968 4.42391 9.68694 3.5 12 3.5C14.313 3.5 16.4102 4.42384 17.9427 5.92266C17.5315 6.18749 17.0531 6.43373 16.5126 6.6139C16.1196 6.74488 15.9072 7.16962 16.0382 7.56258C16.1692 7.95554 16.594 8.16791 16.9869 8.03692C17.7396 7.78603 18.388 7.43585 18.9257 7.07083C19.9169 8.46108 20.5 10.1624 20.5 12C20.5 13.8517 19.9079 15.565 18.9028 16.9611C18.3697 16.6017 17.7291 16.258 16.9872 16.0107C16.5942 15.8797 16.1695 16.092 16.0385 16.485C15.9075 16.878 16.1199 17.3027 16.5128 17.4337C17.0404 17.6095 17.5089 17.8483 17.9133 18.1059C16.3834 19.5879 14.2982 20.5 12 20.5C9.70179 20.5 7.61661 19.5879 6.08669 18.106C6.4912 17.8484 6.95968 17.6095 7.48727 17.4337C7.88023 17.3027 8.0926 16.878 7.96161 16.485C7.83063 16.092 7.40589 15.8797 7.01293 16.0107C6.27098 16.258 5.63037 16.6018 5.09726 16.9611C4.09208 15.565 3.5 13.8517 3.5 12C3.5 10.1625 4.08304 8.46122 5.07422 7.07101Z" 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_baseball_24_regular.svg";

Details