Tag Dismiss icon
Used to represent information tied to specific data. The Tag Dismiss icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Tag Dismiss 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 { TagDismiss24Regular, TagDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <TagDismiss24Regular aria-label="Tag Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_tag_dismiss_24_regular.svg" width="24" height="24" alt="Tag Dismiss"> 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.5738 21.6575 11.4003 21.0482 12.0098L21.022 12.036C20.5795 11.7502 20.1002 11.5167 19.5926 11.3442L19.9874 10.9492C20.3155 10.6211 20.4998 10.176 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.648 20.0878 10.6534 20.1309 11.3407 19.5824C11.5051 20.0688 11.7255 20.5294 11.9942 20.9565C10.7372 21.7569 9.05045 21.6098 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.4218 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.50218ZM17.5 23C20.5376 23 23 20.5376 23 17.5C23 14.4624 20.5376 12 17.5 12C14.4624 12 12 14.4624 12 17.5C12 20.5376 14.4624 23 17.5 23ZM15.1464 15.1464C15.3417 14.9512 15.6583 14.9512 15.8536 15.1464L17.5 16.7929L19.1464 15.1464C19.3417 14.9512 19.6583 14.9512 19.8536 15.1464C20.0488 15.3417 20.0488 15.6583 19.8536 15.8536L18.2071 17.5L19.8536 19.1464C20.0488 19.3417 20.0488 19.6583 19.8536 19.8536C19.6583 20.0488 19.3417 20.0488 19.1464 19.8536L17.5 18.2071L15.8536 19.8536C15.6583 20.0488 15.3417 20.0488 15.1464 19.8536C14.9512 19.6583 14.9512 19.3417 15.1464 19.1464L16.7929 17.5L15.1464 15.8536C14.9512 15.6583 14.9512 15.3417 15.1464 15.1464Z" 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_dismiss_24_regular.svg";Details
| Name | Tag Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_tag_dismiss_24_regular.svg |
| Filled file | ic_fluent_tag_dismiss_24_filled.svg |
| React components | TagDismiss24Regular, TagDismiss24Filled |
| License | MIT (© Microsoft Corporation) |