Dismiss Square icon
Used in scenarios where UI is closed, dismissed, or removed. The Dismiss Square 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 Dismiss Square 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 { DismissSquare24Regular, DismissSquare24Filled } from "@fluentui/react-icons";
export function Example() {
return <DismissSquare24Regular aria-label="Dismiss Square" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_dismiss_square_24_regular.svg" width="24" height="24" alt="Dismiss Square"> 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="M8.21967 8.21967C8.51256 7.92678 8.98744 7.92678 9.28033 8.21967L12 10.9393L14.7197 8.21967C15.0126 7.92678 15.4874 7.92678 15.7803 8.21967C16.0732 8.51256 16.0732 8.98744 15.7803 9.28033L13.0607 12L15.7803 14.7197C16.0732 15.0126 16.0732 15.4874 15.7803 15.7803C15.4874 16.0732 15.0126 16.0732 14.7197 15.7803L12 13.0607L9.28033 15.7803C8.98744 16.0732 8.51256 16.0732 8.21967 15.7803C7.92678 15.4874 7.92678 15.0126 8.21967 14.7197L10.9393 12L8.21967 9.28033C7.92678 8.98744 7.92678 8.51256 8.21967 8.21967ZM6.25 3C4.45507 3 3 4.45507 3 6.25V17.75C3 19.5449 4.45507 21 6.25 21H17.75C19.5449 21 21 19.5449 21 17.75V6.25C21 4.45507 19.5449 3 17.75 3H6.25ZM4.5 6.25C4.5 5.2835 5.2835 4.5 6.25 4.5H17.75C18.7165 4.5 19.5 5.2835 19.5 6.25V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H6.25C5.2835 19.5 4.5 18.7165 4.5 17.75V6.25Z" 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/dismiss_square_24_regular.svg";Details
| Name | Dismiss Square |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_dismiss_square_24_regular.svg |
| Filled file | ic_fluent_dismiss_square_24_filled.svg |
| React components | DismissSquare24Regular, DismissSquare24Filled |
| License | MIT (© Microsoft Corporation) |