Accessibility icon

Use the Accessibility 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 { Accessibility24Regular, Accessibility24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Accessibility24Regular aria-label="Accessibility" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_accessibility_24_regular.svg" width="24" height="24" alt="Accessibility">

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="M10.5 5C10.5 5.64117 10.9022 6.18838 11.4682 6.403C11.8174 6.48797 12.1822 6.48801 12.5315 6.4031C13.0975 6.18855 13.5 5.64127 13.5 5C13.5 4.17157 12.8284 3.5 12 3.5C11.1715 3.5 10.5 4.17157 10.5 5ZM9.02622 5.39876C9.0089 5.2683 8.99995 5.1352 8.99995 5C8.99995 3.34315 10.3431 2 12 2C13.6568 2 15 3.34315 15 5C15 5.13522 14.991 5.26835 14.9737 5.39883L17.8502 4.17784C18.9933 3.6926 20.318 4.2222 20.8116 5.36177C21.3069 6.50526 20.7776 7.82908 19.6306 8.31599L16.0025 9.85602V13.5732L17.8768 19.0167C18.2814 20.1916 17.6569 21.4721 16.4819 21.8766C15.307 22.2812 14.0266 21.6567 13.622 20.4818L12.0001 15.7715L10.3783 20.4815C9.97376 21.6565 8.69332 22.281 7.51838 21.8764C6.34344 21.4719 5.71892 20.1914 6.12349 19.0165L8.00247 13.5595V9.85809L4.3695 8.31599C3.22242 7.82908 2.69318 6.50526 3.18846 5.36177C3.68204 4.2222 5.00676 3.6926 6.1499 4.17784L9.02622 5.39876ZM11.022 7.83699C10.8569 7.79238 10.6941 7.73627 10.5348 7.66865L5.56381 5.55859C5.1793 5.39538 4.73092 5.57464 4.5649 5.95794C4.40058 6.33732 4.57503 6.77369 4.9556 6.93523L8.74088 8.54199C9.20262 8.73798 9.50247 9.19101 9.50247 9.69262V13.6014C9.50247 13.7399 9.47946 13.8774 9.43437 14.0083L7.54177 19.5048C7.40691 19.8965 7.61508 20.3233 8.00673 20.4581C8.39838 20.593 8.82519 20.3848 8.96004 19.9932L11.0684 13.8702C11.3739 12.9821 12.6275 12.9856 12.9318 13.8699L15.0403 19.9934C15.1751 20.3851 15.6019 20.5932 15.9936 20.4584C16.3852 20.3235 16.5934 19.8967 16.4585 19.5051L14.5706 14.022C14.5255 13.891 14.5025 13.7535 14.5025 13.615V9.69055C14.5025 9.18894 14.8023 8.73591 15.2641 8.53992L19.0445 6.93523C19.425 6.77369 19.5995 6.33732 19.4352 5.95794C19.2691 5.57464 18.8208 5.39538 18.4362 5.55859L13.4653 7.66865C13.3057 7.73636 13.1427 7.79254 12.9773 7.83718C12.671 7.9427 12.3422 8 12 8C11.6575 8 11.3285 7.94264 11.022 7.83699Z" 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_24_regular.svg";

Details

Keywords

personinclusive