Braces icon

Use the Braces 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 { Braces24Regular, Braces24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M4.5 5.75C4.5 4.23122 5.73122 3 7.25 3C7.66421 3 8 3.33579 8 3.75C8 4.16421 7.66421 4.5 7.25 4.5C6.55964 4.5 6 5.05964 6 5.75V10.0585C6 10.8034 5.69999 11.4958 5.19767 12C5.69999 12.5042 6 13.1966 6 13.9415V18.25C6 18.9404 6.55964 19.5 7.25 19.5C7.66421 19.5 8 19.8358 8 20.25C8 20.6642 7.66421 21 7.25 21C5.73122 21 4.5 19.7688 4.5 18.25V13.9415C4.5 13.4035 4.15571 12.9258 3.64528 12.7557L3.51283 12.7115C3.20657 12.6094 3 12.3228 3 12C3 11.6772 3.20657 11.3906 3.51283 11.2885L3.64528 11.2443C4.15571 11.0742 4.5 10.5965 4.5 10.0585V5.75ZM19.5 5.75C19.5 4.23122 18.2688 3 16.75 3C16.3358 3 16 3.33579 16 3.75C16 4.16421 16.3358 4.5 16.75 4.5C17.4404 4.5 18 5.05964 18 5.75V10.0585C18 10.8034 18.3 11.4958 18.8023 12C18.3 12.5042 18 13.1966 18 13.9415V18.25C18 18.9404 17.4404 19.5 16.75 19.5C16.3358 19.5 16 19.8358 16 20.25C16 20.6642 16.3358 21 16.75 21C18.2688 21 19.5 19.7688 19.5 18.25V13.9415C19.5 13.4035 19.8443 12.9258 20.3547 12.7557L20.4872 12.7115C20.7934 12.6094 21 12.3228 21 12C21 11.6772 20.7934 11.3906 20.4872 11.2885L20.3547 11.2443C19.8443 11.0742 19.5 10.5965 19.5 10.0585V5.75Z" 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/braces_24_regular.svg";

Details

Keywords

codebrackets