Wand icon

Use the Wand 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 { Wand24Regular, Wand24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Wand24Regular aria-label="Wand" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_wand_24_regular.svg" width="24" height="24" alt="Wand">

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="M13.3136 7.56538L13.1775 7.69092L2.69814 18.1785C1.81212 19.0652 1.81262 20.5022 2.69924 21.3883C3.58585 22.2743 5.02284 22.2738 5.90895 21.3871L16.3879 10.9003C17.2654 10.0213 17.2651 8.59738 16.3868 7.71848L16.2304 7.5715C15.3931 6.85388 14.1533 6.85191 13.3136 7.56538ZM12.466 10.526L13.554 11.614L4.84792 20.3268C4.54743 20.6275 4.06019 20.6277 3.75956 20.3273C3.45889 20.0268 3.45872 19.5395 3.75919 19.2388L12.466 10.526ZM16.8518 15.0068L16.75 15C16.3703 15 16.0565 15.2822 16.0068 15.6482L16 15.75V16.5H15.25C14.8703 16.5 14.5565 16.7822 14.5068 17.1482L14.5 17.25C14.5 17.6297 14.7822 17.9435 15.1482 17.9932L15.25 18H16V18.75C16 19.1297 16.2822 19.4435 16.6482 19.4932L16.75 19.5C17.1297 19.5 17.4435 19.2178 17.4932 18.8518L17.5 18.75V18H18.25C18.6297 18 18.9435 17.7178 18.9932 17.3518L19 17.25C19 16.8703 18.7178 16.5565 18.3518 16.5068L18.25 16.5H17.5V15.75C17.5 15.3703 17.2178 15.0565 16.8518 15.0068L16.75 15L16.8518 15.0068ZM15.2987 8.75163L15.326 8.77899C15.619 9.07214 15.6191 9.54731 15.3266 9.84034L14.615 10.553L13.526 9.464L14.2556 8.73467C14.5496 8.45867 15.0115 8.46427 15.2987 8.75163ZM6.85177 5.00685L6.75 5C6.3703 5 6.05651 5.28215 6.00685 5.64823L6 5.75V6.5H5.25C4.8703 6.5 4.55651 6.78215 4.50685 7.14823L4.5 7.25C4.5 7.6297 4.78215 7.94349 5.14823 7.99315L5.25 8H6V8.75C6 9.1297 6.28215 9.44349 6.64823 9.49315L6.75 9.5C7.1297 9.5 7.44349 9.21785 7.49315 8.85177L7.5 8.75V8H8.25C8.6297 8 8.94349 7.71785 8.99315 7.35177L9 7.25C9 6.8703 8.71785 6.55651 8.35177 6.50685L8.25 6.5H7.5V5.75C7.5 5.3703 7.21785 5.05651 6.85177 5.00685L6.75 5L6.85177 5.00685ZM18.8518 3.00685L18.75 3C18.3703 3 18.0565 3.28215 18.0068 3.64823L18 3.75V4.5H17.25C16.8703 4.5 16.5565 4.78215 16.5068 5.14823L16.5 5.25C16.5 5.6297 16.7822 5.94349 17.1482 5.99315L17.25 6H18V6.75C18 7.1297 18.2822 7.44349 18.6482 7.49315L18.75 7.5C19.1297 7.5 19.4435 7.21785 19.4932 6.85177L19.5 6.75V6H20.25C20.6297 6 20.9435 5.71785 20.9932 5.35177L21 5.25C21 4.8703 20.7178 4.55651 20.3518 4.50685L20.25 4.5H19.5V3.75C19.5 3.3703 19.2178 3.05651 18.8518 3.00685L18.75 3L18.8518 3.00685Z" 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/wand_24_regular.svg";

Details

Keywords

sparklemagicedittouchupai