Play Circle Hint Half icon

Use the Play Circle Hint Half 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 { PlayCircleHintHalf24Regular, PlayCircleHintHalf24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PlayCircleHintHalf24Regular aria-label="Play Circle Hint Half" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_play_circle_hint_half_24_regular.svg" width="24" height="24" alt="Play Circle Hint Half">

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 3.5C11.91 3.5 11.8204 3.50139 11.7312 3.50416C7.2317 3.64395 3.61323 7.28064 3.5026 11.7874C3.50087 11.8581 3.5 11.9289 3.5 12C3.5 12.0888 3.50136 12.1773 3.50406 12.2655C3.56827 14.3583 4.38901 16.2607 5.70202 17.7085C5.94536 17.9768 6.20561 18.2295 6.48106 18.4649C7.91597 19.691 9.764 20.4477 11.7874 20.4974C11.8581 20.4991 11.9289 20.5 12 20.5C12.5686 20.5 13.1235 20.4443 13.6597 20.3382C14.066 20.2578 14.4606 20.522 14.541 20.9284C14.6214 21.3347 14.3571 21.7293 13.9508 21.8097C13.3193 21.9346 12.6669 22 12 22C11.8437 22 11.6881 21.9964 11.5334 21.9893C9.13195 21.879 6.95148 20.9217 5.28386 19.4091C4.96521 19.1201 4.6653 18.8108 4.38615 18.4833C2.89816 16.7375 2 14.4736 2 12C2 9.32672 3.04897 6.89845 4.75776 5.10433C4.88001 4.97596 5.00565 4.85085 5.13451 4.72913C6.92564 3.03726 9.34169 2 12 2C12.6669 2 13.3193 2.06539 13.9508 2.19032C14.3571 2.27071 14.6214 2.66528 14.541 3.07162C14.4606 3.47795 14.066 3.74219 13.6597 3.66181C13.1235 3.55573 12.5686 3.5 12 3.5ZM16.5162 3.89078C16.7467 3.54658 17.2125 3.45436 17.5567 3.68479C18.6469 4.41466 19.5853 5.35313 20.3152 6.44332C20.5456 6.78751 20.4534 7.25335 20.1092 7.48378C19.765 7.71422 19.2992 7.62199 19.0688 7.27779C18.448 6.35053 17.6495 5.55203 16.7222 4.93125C16.378 4.70081 16.2858 4.23498 16.5162 3.89078ZM20.9284 9.45901C21.3347 9.37862 21.7293 9.64286 21.8097 10.0492C21.9346 10.6807 22 11.3331 22 12C22 12.6669 21.9346 13.3193 21.8097 13.9508C21.7293 14.3571 21.3347 14.6214 20.9284 14.541C20.522 14.4606 20.2578 14.066 20.3382 13.6597C20.4443 13.1235 20.5 12.5686 20.5 12C20.5 11.4314 20.4443 10.8765 20.3382 10.3403C20.2578 9.93396 20.522 9.5394 20.9284 9.45901ZM20.1092 16.5162C20.4534 16.7467 20.5456 17.2125 20.3152 17.5567C19.5853 18.6469 18.6469 19.5853 17.5567 20.3152C17.2125 20.5456 16.7467 20.4534 16.5162 20.1092C16.2858 19.765 16.378 19.2992 16.7222 19.0688C17.6495 18.448 18.448 17.6495 19.0688 16.7222C19.2992 16.378 19.765 16.2858 20.1092 16.5162ZM10.8556 8.15485C10.0225 7.6938 9 8.29583 9 9.24742V14.7459C9 15.6975 10.0225 16.2995 10.8556 15.8385L16.6134 12.6522C16.852 12.5202 17 12.2692 17 11.9967C17 11.7242 16.852 11.4732 16.6134 11.3411L10.8556 8.15485Z" 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/play_circle_hint_half_24_regular.svg";

Details