Phone Link Setup icon

Use the Phone Link Setup 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 { PhoneLinkSetup24Regular, PhoneLinkSetup24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PhoneLinkSetup24Regular aria-label="Phone Link Setup" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_phone_link_setup_24_regular.svg" width="24" height="24" alt="Phone Link Setup">

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="M17.5 12C17.7931 12 18.0806 12.0245 18.3608 12.0717L18.5341 12.7878C18.7931 13.8616 19.8735 14.5221 20.9473 14.2631L21.0451 14.2369L21.6462 14.058C22.0087 14.525 22.2991 15.0546 22.4998 15.6285L22.0526 16.0588C21.2985 16.7844 21.237 17.9589 21.8837 18.7573L22.0251 18.9142L22.4998 19.3715C22.2993 19.945 22.0091 20.4742 21.6469 20.941L21.0451 20.7631C19.9858 20.4501 18.8733 21.0551 18.5603 22.1144L18.5341 22.2122L18.3608 22.9283C18.0806 22.9755 17.7931 23 17.5 23C17.2066 23 16.9188 22.9754 16.6383 22.9281L16.4659 22.2122C16.2069 21.1384 15.1265 20.4779 14.0527 20.7369L13.9549 20.7631L13.3531 20.941C12.9909 20.4742 12.7007 19.945 12.5002 19.3715L12.9474 18.9412C13.7015 18.2156 13.763 17.0411 13.1163 16.2427L12.9749 16.0858L12.5002 15.6285C12.7007 15.055 12.9909 14.5258 13.3531 14.059L13.9549 14.2369C15.0142 14.5499 16.1267 13.9449 16.4397 12.8856L16.4659 12.7878L16.6383 12.0719C16.9188 12.0246 17.2066 12 17.5 12ZM13.75 2C14.9926 2 16 3.00736 16 4.25L16.0002 11.1739C15.4723 11.2986 14.9693 11.4876 14.4999 11.7323L14.5 4.25C14.5 3.83579 14.1642 3.5 13.75 3.5H6.25C5.83579 3.5 5.5 3.83579 5.5 4.25V19.75C5.5 20.1642 5.83579 20.5 6.25 20.5L11.7328 20.5011C12.02 21.052 12.384 21.5566 12.8104 22.0008L6.25 22C5.00736 22 4 20.9926 4 19.75V4.25C4 3.00736 5.00736 2 6.25 2H13.75ZM8.74887 17.5038L11 17.499C11 18.0162 11.0602 18.5184 11.1739 18.9998L8.75113 19.0038C8.33692 19.0044 8.00062 18.6691 8 18.2549C7.99938 17.8407 8.33466 17.5044 8.74887 17.5038ZM17.5 16C16.6994 16 16.0503 16.6716 16.0503 17.5C16.0503 18.3284 16.6994 19 17.5 19C18.3006 19 18.9497 18.3284 18.9497 17.5C18.9497 16.6716 18.3006 16 17.5 16Z" 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/phone_link_setup_24_regular.svg";

Details

Keywords

devicemobilesmallscreencellulartelephoneappleandroidgear