Accessibility Error icon
Used for accessibility errors. The Accessibility Error 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 Accessibility Error 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 { AccessibilityError24Regular, AccessibilityError24Filled } from "@fluentui/react-icons";
export function Example() {
return <AccessibilityError24Regular aria-label="Accessibility Error" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_accessibility_error_24_regular.svg" width="24" height="24" alt="Accessibility Error"> 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="M11.4684 6.403C10.9025 6.18838 10.5002 5.64117 10.5002 5C10.5002 4.17157 11.1718 3.5 12.0002 3.5C12.8286 3.5 13.5002 4.17157 13.5002 5C13.5002 5.64127 13.0978 6.18855 12.5317 6.4031C12.1824 6.48801 11.8177 6.48797 11.4684 6.403ZM9.0002 5C9.0002 5.1352 9.00914 5.2683 9.02647 5.39876L6.15015 4.17784C5.00701 3.6926 3.68228 4.2222 3.1887 5.36177C2.69342 6.50526 3.22266 7.82908 4.36975 8.31599L8.00271 9.85809V13.5595L6.12373 19.0165C5.71917 20.1914 6.34368 21.4719 7.51862 21.8764C8.69356 22.281 9.974 21.6565 10.3786 20.4815L10.5237 20.0599C10.1868 19.2743 10.0002 18.4089 10.0002 17.5C10.0002 17.2947 10.0098 17.0917 10.0284 16.8912L8.96029 19.9932C8.82543 20.3848 8.39862 20.593 8.00697 20.4581C7.61533 20.3233 7.40716 19.8965 7.54201 19.5048L9.43461 14.0083C9.4797 13.8774 9.50271 13.7399 9.50271 13.6014V9.69262C9.50271 9.19101 9.20286 8.73798 8.74113 8.54199L4.95584 6.93523C4.57528 6.77369 4.40082 6.33732 4.56514 5.95794C4.73116 5.57464 5.17954 5.39538 5.56405 5.55859L10.535 7.66865C10.6943 7.73627 10.8571 7.79238 11.0223 7.83699C11.3288 7.94264 11.6578 8 12.0002 8C12.3424 8 12.6712 7.9427 12.9776 7.83718C13.143 7.79254 13.306 7.73636 13.4655 7.66865L18.4365 5.55859C18.821 5.39538 19.2694 5.57464 19.4354 5.95794C19.5997 6.33732 19.4253 6.77369 19.0447 6.93523L15.2643 8.53992C14.8026 8.73591 14.5027 9.18894 14.5027 9.69055V11.3127C14.9809 11.1584 15.4833 11.0581 16.0027 11.0188V9.85602L19.6308 8.31599C20.7779 7.82908 21.3071 6.50526 20.8118 5.36177C20.3183 4.2222 18.9935 3.6926 17.8504 4.17784L14.9739 5.39883C14.9913 5.26835 15.0002 5.13522 15.0002 5C15.0002 3.34315 13.6571 2 12.0002 2C10.3433 2 9.0002 3.34315 9.0002 5ZM22.0002 17.5C22.0002 20.5376 19.5378 23 16.5002 23C13.4627 23 11.0002 20.5376 11.0002 17.5C11.0002 14.4624 13.4627 12 16.5002 12C19.5378 12 22.0002 14.4624 22.0002 17.5ZM16.5002 14C16.2241 14 16.0002 14.2239 16.0002 14.5V18.5C16.0002 18.7761 16.2241 19 16.5002 19C16.7764 19 17.0002 18.7761 17.0002 18.5V14.5C17.0002 14.2239 16.7764 14 16.5002 14ZM16.5002 21.125C16.8454 21.125 17.1252 20.8452 17.1252 20.5C17.1252 20.1548 16.8454 19.875 16.5002 19.875C16.1551 19.875 15.8752 20.1548 15.8752 20.5C15.8752 20.8452 16.1551 21.125 16.5002 21.125Z" 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/accessibility_error_24_regular.svg";Details
| Name | Accessibility Error |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_accessibility_error_24_regular.svg |
| Filled file | ic_fluent_accessibility_error_24_filled.svg |
| React components | AccessibilityError24Regular, AccessibilityError24Filled |
| License | MIT (© Microsoft Corporation) |