Diamond Dismiss icon
Used in general shape creation scenarios with the ability to dismiss the shape. The Diamond 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 Diamond 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 { DiamondDismiss24Regular, DiamondDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <DiamondDismiss24Regular aria-label="Diamond Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_diamond_dismiss_24_regular.svg" width="24" height="24" alt="Diamond 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="M9.7122 1.96313C10.9814 0.693909 13.0397 0.693909 14.3089 1.96313L22.0589 9.71317C23.3277 10.9823 23.3277 13.0398 22.0589 14.3089L14.3089 22.0589C13.0397 23.3277 10.9812 23.328 9.7122 22.0589L1.96314 14.3089C0.694098 13.0398 0.69441 10.9824 1.96314 9.71317L9.7122 1.96313ZM13.2483 3.02369C12.5649 2.34026 11.4562 2.34026 10.7728 3.02369L3.02369 10.7737C2.34074 11.4572 2.34043 12.5651 3.02369 13.2483L10.7728 20.9984C11.456 21.6817 12.5649 21.6813 13.2483 20.9984L20.9974 13.2483C21.6808 12.5649 21.6808 11.4572 20.9974 10.7737L13.2483 3.02369ZM14.72 8.22C15.0129 7.92711 15.4877 7.92711 15.7806 8.22C16.0732 8.51291 16.0734 8.98774 15.7806 9.28055L13.0608 12.0003L15.7806 14.72C16.0732 15.0129 16.0734 15.4878 15.7806 15.7806C15.4878 16.0734 15.013 16.0732 14.72 15.7806L12.0003 13.0608L9.28056 15.7806C8.98774 16.0734 8.51292 16.0732 8.22 15.7806C7.92711 15.4877 7.92711 15.0129 8.22 14.72L10.9397 12.0003L8.22 9.28055C7.92711 8.98766 7.92711 8.5129 8.22 8.22C8.5129 7.92711 8.98766 7.92711 9.28056 8.22L12.0003 10.9397L14.72 8.22Z" 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/diamond_dismiss_24_regular.svg";Details
| Name | Diamond Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_diamond_dismiss_24_regular.svg |
| Filled file | ic_fluent_diamond_dismiss_24_filled.svg |
| React components | DiamondDismiss24Regular, DiamondDismiss24Filled |
| License | MIT (© Microsoft Corporation) |