Star Edit icon

Use the Star Edit 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 { StarEdit24Regular, StarEdit24Filled } from "@fluentui/react-icons";

export function Example() {
  return <StarEdit24Regular aria-label="Star Edit" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_star_edit_24_regular.svg" width="24" height="24" alt="Star Edit">

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.209 3.10215C12.7138 2.09876 11.283 2.09877 10.7878 3.10215L8.42988 7.87987L3.15735 8.64601C2.05005 8.80691 1.60791 10.1677 2.40916 10.9487L6.2244 14.6676L5.32374 19.9189C5.13459 21.0217 6.29213 21.8627 7.28252 21.342L10.227 19.794L10.531 18.5766C10.6001 18.3 10.7007 18.0336 10.83 17.7823L6.85353 19.8729L7.71614 14.8435C7.79125 14.4055 7.64606 13.9587 7.32788 13.6486L3.67382 10.0867L8.72361 9.35294C9.16332 9.28904 9.54344 9.01288 9.74008 8.61443L11.9984 4.03854L14.2568 8.61443C14.4534 9.01288 14.8335 9.28904 15.2732 9.35294L19.7229 9.99952C20.4502 10.0008 21.1772 10.2424 21.7747 10.7243C22.3037 9.93177 21.8468 8.79239 20.8395 8.64601L15.567 7.87987L13.209 3.10215ZM18.1 11.669L12.2039 17.5714C11.8602 17.9155 11.6163 18.3467 11.4984 18.8189L11.0412 20.6496C10.8424 21.4457 11.5628 22.1669 12.358 21.9678L14.1868 21.5102C14.6584 21.3921 15.0891 21.148 15.4329 20.8038L21.3289 14.9014C22.2206 14.0088 22.2206 12.5616 21.3289 11.669C20.4373 10.7764 18.9916 10.7764 18.1 11.669Z" 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/star_edit_24_regular.svg";

Details

Keywords

favoriteratingvotepencil