Control Button icon

Use the Control Button 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 { ControlButton24Regular, ControlButton24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ControlButton24Regular aria-label="Control Button" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_control_button_24_regular.svg" width="24" height="24" alt="Control Button">

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="M7.75 8C6.23122 8 5 9.23122 5 10.75V13.25C5 14.7688 6.23122 16 7.75 16H8.25C8.66421 16 9 15.6642 9 15.25C9 14.8358 8.66421 14.5 8.25 14.5H7.75C7.05964 14.5 6.5 13.9404 6.5 13.25V10.75C6.5 10.0596 7.05964 9.5 7.75 9.5H8.25C8.66421 9.5 9 9.16421 9 8.75C9 8.33579 8.66421 8 8.25 8H7.75ZM11.5 8.75C11.5 8.33579 11.1642 8 10.75 8C10.3358 8 10 8.33579 10 8.75V11H9.75C9.33579 11 9 11.3358 9 11.75C9 12.1642 9.33579 12.5 9.75 12.5H10V14C10 15.1046 10.8954 16 12 16H12.25C12.6642 16 13 15.6642 13 15.25C13 14.8358 12.6642 14.5 12.25 14.5H12C11.7239 14.5 11.5 14.2761 11.5 14V12.5H12.25C12.6642 12.5 13 12.1642 13 11.75C13 11.3358 12.6642 11 12.25 11H11.5V8.75ZM19.5 8.75006C19.5 8.33584 19.1642 8.00006 18.75 8.00006C18.3358 8.00006 18 8.33584 18 8.75006V15.2501C18 15.6643 18.3358 16.0001 18.75 16.0001C19.1642 16.0001 19.5 15.6643 19.5 15.2501V8.75006ZM15.5 13C15.5 12.7239 15.7239 12.5 16 12.5H16.25C16.6642 12.5 17 12.1642 17 11.75C17 11.3358 16.6642 11 16.25 11H16C14.8954 11 14 11.8954 14 13V15.25C14 15.6642 14.3358 16 14.75 16C15.1642 16 15.5 15.6642 15.5 15.25V13ZM5.25 4C3.45507 4 2 5.45507 2 7.25V16.75C2 18.5449 3.45507 20 5.25 20H18.75C20.5449 20 22 18.5449 22 16.75V7.25C22 5.45507 20.5449 4 18.75 4H5.25ZM3.5 7.25C3.5 6.2835 4.2835 5.5 5.25 5.5H18.75C19.7165 5.5 20.5 6.2835 20.5 7.25V16.75C20.5 17.7165 19.7165 18.5 18.75 18.5H5.25C4.2835 18.5 3.5 17.7165 3.5 16.75V7.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/control_button_24_regular.svg";

Details

Keywords

keyboardbuttonhotkey