Play Circle Hint icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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 2C11.3331 2 10.6807 2.06539 10.0492 2.19032C9.64286 2.27071 9.37862 2.66528 9.45901 3.07162C9.5394 3.47796 9.93396 3.74219 10.3403 3.66181C10.8765 3.55573 11.4314 3.5 12 3.5C12.5686 3.5 13.1235 3.55573 13.6597 3.66181C14.066 3.74219 14.4606 3.47795 14.541 3.07162C14.6214 2.66528 14.3571 2.27071 13.9508 2.19032C13.3193 2.06539 12.6669 2 12 2ZM7.27779 4.93125C7.62199 4.70081 7.71422 4.23498 7.48378 3.89078C7.25335 3.54658 6.78751 3.45436 6.44332 3.68479C5.35313 4.41466 4.41466 5.35312 3.68479 6.44332C3.45436 6.78751 3.54658 7.25335 3.89078 7.48378C4.23498 7.71422 4.70081 7.62199 4.93125 7.27779C5.55203 6.35053 6.35053 5.55203 7.27779 4.93125ZM17.5567 3.68479C17.2125 3.45436 16.7467 3.54658 16.5162 3.89078C16.2858 4.23498 16.378 4.70081 16.7222 4.93125C17.6495 5.55203 18.448 6.35053 19.0688 7.27779C19.2992 7.62199 19.765 7.71422 20.1092 7.48378C20.4534 7.25335 20.5456 6.78751 20.3152 6.44332C19.5853 5.35313 18.6469 4.41466 17.5567 3.68479ZM21.8097 10.0492C21.7293 9.64286 21.3347 9.37862 20.9284 9.45901C20.522 9.5394 20.2578 9.93396 20.3382 10.3403C20.4443 10.8765 20.5 11.4314 20.5 12C20.5 12.5686 20.4443 13.1235 20.3382 13.6597C20.2578 14.066 20.522 14.4606 20.9284 14.541C21.3347 14.6214 21.7293 14.3571 21.8097 13.9508C21.9346 13.3193 22 12.6669 22 12C22 11.3331 21.9346 10.6807 21.8097 10.0492ZM3.66181 10.3403C3.74219 9.93397 3.47795 9.5394 3.07162 9.45901C2.66528 9.37862 2.27071 9.64286 2.19032 10.0492C2.06539 10.6807 2 11.3331 2 12C2 12.6669 2.06539 13.3193 2.19032 13.9508C2.27071 14.3571 2.66528 14.6214 3.07162 14.541C3.47796 14.4606 3.74219 14.066 3.66181 13.6597C3.55573 13.1235 3.5 12.5686 3.5 12C3.5 11.4314 3.55573 10.8765 3.66181 10.3403ZM4.93125 16.7222C4.70081 16.378 4.23498 16.2858 3.89078 16.5162C3.54658 16.7467 3.45436 17.2125 3.68479 17.5567C4.41466 18.6469 5.35312 19.5853 6.44332 20.3152C6.78751 20.5456 7.25335 20.4534 7.48378 20.1092C7.71422 19.765 7.62199 19.2992 7.27779 19.0688C6.35053 18.448 5.55203 17.6495 4.93125 16.7222ZM20.3152 17.5567C20.5456 17.2125 20.4534 16.7467 20.1092 16.5162C19.765 16.2858 19.2992 16.378 19.0688 16.7222C18.448 17.6495 17.6495 18.448 16.7222 19.0688C16.378 19.2992 16.2858 19.765 16.5162 20.1092C16.7467 20.4534 17.2125 20.5456 17.5567 20.3152C18.6469 19.5853 19.5853 18.6469 20.3152 17.5567ZM10.3403 20.3382C9.93397 20.2578 9.5394 20.522 9.45901 20.9284C9.37862 21.3347 9.64286 21.7293 10.0492 21.8097C10.6807 21.9346 11.3331 22 12 22C12.6669 22 13.3193 21.9346 13.9508 21.8097C14.3571 21.7293 14.6214 21.3347 14.541 20.9284C14.4606 20.522 14.066 20.2578 13.6597 20.3382C13.1235 20.4443 12.5686 20.5 12 20.5C11.4314 20.5 10.8765 20.4443 10.3403 20.3382ZM9 9.24742C9 8.29583 10.0225 7.6938 10.8556 8.15485L16.6134 11.3411C16.852 11.4732 17 11.7242 17 11.9967C17 12.2692 16.852 12.5202 16.6134 12.6522L10.8556 15.8385C10.0225 16.2995 9 15.6975 9 14.7459V9.24742Z" 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_24_regular.svg";

Details

Keywords

movievideoplayclipeditpreviewhovercircle