Pair icon

Use the Pair 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 { Pair24Regular, Pair24Filled } from "@fluentui/react-icons";

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

Use it in HTML

Reference the SVG file directly:

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

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="M18.6688 21.0008H11.3312C11.0501 21.5916 10.4478 22 9.75 22C8.7835 22 8 21.2165 8 20.25C8 19.5495 8.4116 18.9451 9.00614 18.6655L9.006 14.995L5.33355 14.9959C5.07288 15.5483 4.53159 15.9424 3.89353 15.9942L3.75 16C2.7835 16 2 15.2165 2 14.25C2 13.5518 2.40883 12.9492 3.00015 12.6683L3.00017 5.33119C2.40939 5.05015 2.00102 4.44776 2.00102 3.75C2.00102 2.7835 2.78452 2 3.75102 2C4.44878 2 5.05117 2.40837 5.3322 2.99915H12.6688C12.9499 2.40837 13.5522 2 14.25 2C15.2165 2 16 2.7835 16 3.75C16 4.44973 15.5893 5.05354 14.9959 5.33355L14.995 9.004L18.6664 9.00414C18.9271 8.45166 19.4684 8.0576 20.1065 8.0058L20.25 8C21.2165 8 22 8.7835 22 9.75C22 10.4474 21.5921 11.0495 21.0018 11.3307V18.6693C21.5921 18.9505 22 19.5526 22 20.25C22 21.2165 21.2165 22 20.25 22C19.5522 22 18.9499 21.5916 18.6688 21.0008H11.3312H18.6688ZM18.6707 10.5048L14.995 10.504L14.9959 12.6638C15.5457 12.9254 15.9376 13.4654 15.9892 14.1015L15.995 14.245C15.995 15.2115 15.2115 15.995 14.245 15.995C13.5473 15.995 12.9449 15.5866 12.6638 14.9959L10.506 14.995L10.5068 18.6717C10.8677 18.845 11.1599 19.1384 11.3317 19.5001H18.6683C18.8414 19.1358 19.1366 18.8407 19.5011 18.6679V11.3321C19.1901 11.1847 18.9296 10.9482 18.7523 10.6556L18.6707 10.5048ZM13.495 10.504L11.3293 10.5048C11.1572 10.8643 10.866 11.1558 10.5068 11.3283L10.506 13.495L12.6634 13.4952C12.8362 13.1311 13.1311 12.8362 13.4952 12.6634L13.495 10.504ZM12.6683 4.49985H5.33268C5.15978 4.86389 4.86491 5.15877 4.50085 5.33166V12.6688C4.86277 12.841 5.15623 13.1337 5.32928 13.4952L9.006 13.495L9.00614 11.3345C8.45261 11.0742 8.05766 10.5324 8.0058 9.89353L8 9.75C8 8.7835 8.7835 8 9.75 8C10.4497 8 11.0535 8.41067 11.3336 9.00414L13.495 9.004L13.4952 5.32928C13.1851 5.18082 12.9256 4.94372 12.7493 4.65081L12.6683 4.49985Z" 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/pair_24_regular.svg";

Details

Keywords

duplicategroupcollectionselection