Link Edit icon
Used in generic linking to other content scenarios. The Link Edit icon is part of Microsoft's Fluent UI System Icons, available here in filled and regular (outlined) styles on a 24 px grid. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.
Use the Link Edit 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 { LinkEdit24Regular, LinkEdit24Filled } from "@fluentui/react-icons";
export function Example() {
return <LinkEdit24Regular aria-label="Link Edit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_link_edit_24_regular.svg" width="24" height="24" alt="Link Edit"> 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="M9.9993 5.74992C9.9993 5.33575 9.66354 5 9.24936 5H6.99956L6.75003 5.00612C4.10478 5.13614 2 7.32202 2 9.99948C2 12.7606 4.23838 14.999 6.99956 14.999H9.24936L9.36018 14.9908C9.72181 14.9373 9.9993 14.6256 9.9993 14.249C9.9993 13.8349 9.66354 13.4991 9.24936 13.4991H6.99956L6.79393 13.4932C4.95681 13.3867 3.49987 11.8632 3.49987 9.99948C3.49987 8.06669 5.06673 6.49984 6.99956 6.49984H9.24936L9.36018 6.49171C9.72181 6.43815 9.9993 6.12644 9.9993 5.74992ZM21.9982 9.99948C21.9982 7.23834 19.7599 5 16.9987 5H14.7489L14.6381 5.00813C14.2764 5.06169 13.9989 5.3734 13.9989 5.74992C13.9989 6.16409 14.3347 6.49984 14.7489 6.49984H16.9987L17.2043 6.50579C19.0414 6.61223 20.4984 8.13571 20.4984 9.99948C20.4984 10.0309 20.498 10.0623 20.4971 10.0936C21.0146 10.22 21.5073 10.4736 21.9254 10.8546C21.9733 10.5768 21.9982 10.291 21.9982 9.99948ZM16.9987 9.24956H6.99956L6.8978 9.25641C6.53175 9.30606 6.24963 9.61983 6.24963 9.99948C6.24963 10.4137 6.58538 10.7494 6.99956 10.7494H16.9987L17.1004 10.7426C17.4665 10.6929 17.7486 10.3791 17.7486 9.99948C17.7486 9.58531 17.4129 9.24956 16.9987 9.24956ZM18.0984 11.6688L12.1965 17.5706C11.8524 17.9147 11.6083 18.3458 11.4903 18.8179L11.0327 20.6484C10.8336 21.4445 11.5547 22.1656 12.3508 21.9666L14.1813 21.5089C14.6534 21.3909 15.0846 21.1468 15.4287 20.8027L21.3306 14.9009C22.2231 14.0084 22.2231 12.5613 21.3306 11.6688C20.4381 10.7762 18.991 10.7762 18.0984 11.6688Z" 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/link_edit_24_regular.svg";Details
| Name | Link Edit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_link_edit_24_regular.svg |
| Filled file | ic_fluent_link_edit_24_filled.svg |
| React components | LinkEdit24Regular, LinkEdit24Filled |
| License | MIT (© Microsoft Corporation) |