Accessibility More icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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.0676 13.87L9.58356 18.179C9.86756 18.067 10.1746 18 10.4986 18C10.7416 18 10.9716 18.046 11.1936 18.11L11.9986 15.771L13.2546 19.418C13.5036 18.904 13.9196 18.489 14.4366 18.244L12.9296 13.869C12.6256 12.985 11.3716 12.981 11.0666 13.869L11.0676 13.87ZM20.8116 5.362C20.3176 4.222 18.9936 3.693 17.8506 4.178L14.9746 5.399C14.9916 5.269 15.0006 5.135 15.0006 5C15.0006 3.343 13.6576 2 12.0006 2C10.3436 2 9.00056 3.343 9.00056 5C9.00056 5.135 9.00956 5.268 9.02656 5.399L6.15056 4.178C5.00756 3.693 3.68256 4.222 3.18956 5.362C2.69456 6.505 3.22356 7.829 4.37056 8.316L8.00356 9.858V13.559L6.12456 19.016C5.71956 20.191 6.34456 21.471 7.51956 21.876C7.84456 21.988 8.17656 22.014 8.49656 21.979C8.18956 21.564 8.00156 21.055 8.00156 20.5C8.00156 20.485 8.00556 20.471 8.00556 20.457C7.61556 20.321 7.40856 19.896 7.54256 19.505L9.43556 14.008C9.48056 13.877 9.50356 13.74 9.50356 13.601V9.692C9.50356 9.19 9.20356 8.737 8.74156 8.541L4.95656 6.934C4.57556 6.772 4.40156 6.336 4.56556 5.957C4.73156 5.574 5.17956 5.394 5.56456 5.558L10.5356 7.668C10.6946 7.736 10.8576 7.792 11.0226 7.836C11.3296 7.942 11.6576 7.999 12.0006 7.999C12.3436 7.999 12.6716 7.942 12.9776 7.836C13.1426 7.791 13.3056 7.735 13.4656 7.667L18.4366 5.557C18.8216 5.394 19.2696 5.573 19.4356 5.956C19.5996 6.335 19.4256 6.772 19.0446 6.933L15.2646 8.538C14.8026 8.734 14.5026 9.187 14.5026 9.689V13.613C14.5026 13.752 14.5256 13.889 14.5706 14.02L15.9566 18.044C16.9906 18.236 17.7946 19.063 17.9606 20.106C18.0186 19.751 18.0026 19.379 17.8766 19.015L16.0026 13.572V9.855L19.6306 8.315C20.7776 7.828 21.3066 6.505 20.8116 5.362ZM12.5306 6.403C12.1816 6.488 11.8166 6.488 11.4676 6.403C10.9016 6.188 10.4996 5.641 10.4996 5C10.4996 4.172 11.1716 3.5 11.9996 3.5C12.8276 3.5 13.4996 4.172 13.4996 5C13.4996 5.641 13.0976 6.189 12.5316 6.403H12.5306ZM11.9996 20.5C11.9996 21.328 11.3276 22 10.4996 22C9.67156 22 8.99956 21.328 8.99956 20.5C8.99956 19.672 9.67156 19 10.4996 19C11.3276 19 11.9996 19.672 11.9996 20.5ZM15.4996 22C16.3276 22 16.9996 21.328 16.9996 20.5C16.9996 19.672 16.3276 19 15.4996 19C14.6716 19 13.9996 19.672 13.9996 20.5C13.9996 21.328 14.6716 22 15.4996 22ZM20.4996 22C21.3276 22 21.9996 21.328 21.9996 20.5C21.9996 19.672 21.3276 19 20.4996 19C19.6716 19 18.9996 19.672 18.9996 20.5C18.9996 21.328 19.6716 22 20.4996 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/accessibility_more_24_regular.svg";

Details

Keywords

personinclusive