Sport Cricket Ball icon

Use the Sport Cricket Ball 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 { SportCricketBall24Regular, SportCricketBall24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C9.67918 22 7.54453 21.2074 5.84766 19.8809C5.80166 19.8515 5.75815 19.8187 5.71973 19.7803C3.45151 17.9471 2 15.1435 2 12C2 6.47715 6.47715 2 12 2ZM12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.6083 4.67603 16.9408 6.52539 18.5H7.75C8.16421 18.5 8.5 18.8358 8.5 19.25C8.5 19.4116 8.4473 19.5602 8.36035 19.6826C9.46372 20.2063 10.6975 20.5 12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 10.5536 20.1372 9.19234 19.5 8H18.25C17.8358 8 17.5 7.66421 17.5 7.25C17.5 6.83579 17.8358 6.5 18.25 6.5H18.4785C16.9194 4.66529 14.5963 3.5 12 3.5ZM6.25 14C6.66421 14 7 14.3358 7 14.75V16.25C7 16.6642 6.66421 17 6.25 17C5.83579 17 5.5 16.6642 5.5 16.25V14.75C5.5 14.3358 5.83579 14 6.25 14ZM10.75 15.5C11.1642 15.5 11.5 15.8358 11.5 16.25C11.5 16.6642 11.1642 17 10.75 17H9.25C8.83579 17 8.5 16.6642 8.5 16.25C8.5 15.8358 8.83579 15.5 9.25 15.5H10.75ZM9.25 11C9.66421 11 10 11.3358 10 11.75V13.25C10 13.6642 9.66421 14 9.25 14C8.83579 14 8.5 13.6642 8.5 13.25V11.75C8.5 11.3358 8.83579 11 9.25 11ZM13.75 12.5C14.1642 12.5 14.5 12.8358 14.5 13.25C14.5 13.6642 14.1642 14 13.75 14H12.25C11.8358 14 11.5 13.6642 11.5 13.25C11.5 12.8358 11.8358 12.5 12.25 12.5H13.75ZM12.25 8C12.6642 8 13 8.33579 13 8.75V10.25C13 10.6642 12.6642 11 12.25 11C11.8358 11 11.5 10.6642 11.5 10.25V8.75C11.5 8.33579 11.8358 8 12.25 8ZM16.75 9.5C17.1642 9.5 17.5 9.83579 17.5 10.25C17.5 10.6642 17.1642 11 16.75 11H15.25C14.8358 11 14.5 10.6642 14.5 10.25C14.5 9.83579 14.8358 9.5 15.25 9.5H16.75ZM15.25 5C15.6642 5 16 5.33579 16 5.75V7.25C16 7.66421 15.6642 8 15.25 8C14.8358 8 14.5 7.66421 14.5 7.25V5.75C14.5 5.33579 14.8358 5 15.25 5Z" 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_cricket_ball_24_regular.svg";

Details