Rename icon
Used in general renaming and editing content in input fields. The Rename 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 Rename 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 { Rename24Regular, Rename24Filled } from "@fluentui/react-icons";
export function Example() {
return <Rename24Regular aria-label="Rename" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_rename_24_regular.svg" width="24" height="24" alt="Rename"> 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.75 2H13.7484C14.1626 2 14.4984 2.33579 14.4984 2.75C14.4984 3.1297 14.2162 3.44349 13.8501 3.49315L13.7484 3.5H12.5V20.5H13.7451C14.1248 20.5 14.4385 20.7822 14.4882 21.1482L14.4951 21.25C14.4951 21.6297 14.2129 21.9435 13.8468 21.9932L13.7451 22H9.75C9.33579 22 9 21.6642 9 21.25C9 20.8703 9.28215 20.5565 9.64823 20.5068L9.75 20.5H11V3.5H9.75C9.3703 3.5 9.05651 3.21785 9.00685 2.85177L9 2.75C9 2.3703 9.28215 2.05651 9.64823 2.00685L9.75 2H13.7484H9.75ZM18.2457 4.99689C20.0402 4.99812 21.4947 6.45204 21.4966 8.24609L21.4995 15.751C21.5013 17.4837 20.1454 18.9007 18.4361 18.997L18.2497 19.0018L13.5054 19.0013V17.5013H18.3085C19.2484 17.4706 20.0005 16.699 19.9995 15.7521L19.9966 8.24717C19.9956 7.28104 19.2118 6.49755 18.2452 6.49689H13.5054V4.99689H18.2457ZM10 4.99689V6.49689H5.25C4.2835 6.49689 3.5 7.28039 3.5 8.24689V15.7513C3.5 16.7178 4.2835 17.5013 5.25 17.5013H9.99527V19.0013H5.25C3.45507 19.0013 2 17.5462 2 15.7513V8.24689C2 6.45196 3.45507 4.99689 5.25 4.99689H10Z" 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/rename_24_regular.svg";Details
| Name | Rename |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_rename_24_regular.svg |
| Filled file | ic_fluent_rename_24_filled.svg |
| React components | Rename24Regular, Rename24Filled |
| License | MIT (© Microsoft Corporation) |