Tag Edit icon

Use the Tag 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 { TagEdit24Regular, TagEdit24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_tag_edit_24_regular.svg" width="24" height="24" alt="Tag 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="M19.7498 2C20.9925 2 21.9998 3.00736 21.9998 4.25V9.71196C21.9998 10.0736 21.9396 10.429 21.8246 10.7648C21.4185 10.4245 20.9496 10.1978 20.4597 10.0846C20.4862 9.9631 20.4998 9.83823 20.4998 9.71196V4.25C20.4998 3.83579 20.164 3.5 19.7498 3.5H14.2845C13.82 3.5 13.3745 3.68467 13.0463 4.01333L4.53412 12.5358C3.86389 13.2207 3.86898 14.3191 4.54884 14.9977L9.01006 19.4522C9.33379 19.7747 9.75215 19.9447 10.1755 19.9622L10.0642 20.4075C9.97269 20.7736 9.98252 21.1315 10.0714 21.4588C9.30021 21.417 8.54095 21.1022 7.95079 20.5143L3.48909 16.0592C2.21862 14.7913 2.21699 12.7334 3.48531 11.4632L11.985 2.95334C12.5946 2.34297 13.4219 2 14.2845 2H19.7498ZM16.9998 5.50218C17.8282 5.50218 18.4998 6.17374 18.4998 7.00216C18.4998 7.83057 17.8282 8.50213 16.9998 8.50213C16.1714 8.50213 15.4998 7.83057 15.4998 7.00216C15.4998 6.17374 16.1714 5.50218 16.9998 5.50218ZM18.0999 11.6695L12.1974 17.5719C11.8533 17.916 11.6092 18.3472 11.4911 18.8194L11.0334 20.6501C10.8344 21.4462 11.5556 22.1674 12.3517 21.9683L14.1824 21.5106C14.6545 21.3926 15.0857 21.1485 15.4299 20.8043L21.3323 14.9019C22.2249 14.0093 22.2249 12.5621 21.3323 11.6695C20.4397 10.7768 18.9925 10.7768 18.0999 11.6695Z" 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/tag_edit_24_regular.svg";

Details