Braces Variable icon

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

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

Use it in HTML

Reference the SVG file directly:

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

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="M3.5 5.75C3.5 4.23122 4.73122 3 6.25 3C6.66421 3 7 3.33579 7 3.75C7 4.16421 6.66421 4.5 6.25 4.5C5.55964 4.5 5 5.05964 5 5.75V10.0585C5 10.8034 4.69999 11.4958 4.19767 12C4.69999 12.5042 5 13.1966 5 13.9415V18.25C5 18.9404 5.55964 19.5 6.25 19.5C6.66421 19.5 7 19.8358 7 20.25C7 20.6642 6.66421 21 6.25 21C4.73122 21 3.5 19.7688 3.5 18.25V13.9415C3.5 13.4035 3.15571 12.9258 2.64528 12.7557L2.51283 12.7115C2.20657 12.6094 2 12.3228 2 12C2 11.6772 2.20657 11.3906 2.51283 11.2885L2.64528 11.2443C3.15571 11.0742 3.5 10.5965 3.5 10.0585V5.75ZM20.5 5.75C20.5 4.23122 19.2688 3 17.75 3C17.3358 3 17 3.33579 17 3.75C17 4.16421 17.3358 4.5 17.75 4.5C18.4404 4.5 19 5.05964 19 5.75V10.0585C19 10.8034 19.3 11.4958 19.8023 12C19.3 12.5042 19 13.1966 19 13.9415V18.25C19 18.9404 18.4404 19.5 17.75 19.5C17.3358 19.5 17 19.8358 17 20.25C17 20.6642 17.3358 21 17.75 21C19.2688 21 20.5 19.7688 20.5 18.25V13.9415C20.5 13.4035 20.8443 12.9258 21.3547 12.7557L21.4872 12.7115C21.7934 12.6094 22 12.3228 22 12C22 11.6772 21.7934 11.3906 21.4872 11.2885L21.3547 11.2443C20.8443 11.0742 20.5 10.5965 20.5 10.0585V5.75ZM9.09201 7.03954C8.83771 6.71258 8.36651 6.65368 8.03954 6.90799C7.71258 7.16229 7.65368 7.63349 7.90799 7.96046L11.0499 12L7.90799 16.0395C7.65368 16.3665 7.71258 16.8377 8.03954 17.092C8.36651 17.3463 8.83771 17.2874 9.09201 16.9605L12 13.2216L14.908 16.9605C15.1623 17.2874 15.6335 17.3463 15.9605 17.092C16.2874 16.8377 16.3463 16.3665 16.092 16.0395L12.9501 12L16.092 7.96046C16.3463 7.63349 16.2874 7.16229 15.9605 6.90799C15.6335 6.65368 15.1623 6.71258 14.908 7.03954L12 10.7784L9.09201 7.03954Z" 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_variable_24_regular.svg";

Details

Keywords

codebrackets