Notebook Section Arrow Right icon
Used to denote saved spaces in notebooks. The Notebook Section Arrow Right 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 Notebook Section Arrow Right 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 { NotebookSectionArrowRight24Regular, NotebookSectionArrowRight24Filled } from "@fluentui/react-icons";
export function Example() {
return <NotebookSectionArrowRight24Regular aria-label="Notebook Section Arrow Right" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_notebook_section_arrow_right_24_regular.svg" width="24" height="24" alt="Notebook Section Arrow Right"> 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="M15.6482 2.00685L15.75 2C16.1297 2 16.4435 2.28215 16.4932 2.64823L16.5 2.75V11.0767C15.9768 11.1575 15.4742 11.3007 15 11.4985V5.49986H9.25C8.83579 5.49986 8.5 5.83564 8.5 6.24986V17.7464C8.5 18.1606 8.83579 18.4964 9.25 18.4964H11.0758C11.1563 19.0195 11.2991 19.5221 11.4965 19.9962L9.25 19.9964C8.00736 19.9964 7 18.989 7 17.7464V6.24986C7 5.00722 8.00736 3.99986 9.25 3.99986L15 3.999V2.75C15 2.3703 15.2822 2.05651 15.6482 2.00685Z" fill="currentColor"/>
<path d="M23 17.5003C23 20.5379 20.5376 23.0003 17.5 23.0003C14.4624 23.0003 12 20.5379 12 17.5003C12 14.4627 14.4624 12.0003 17.5 12.0003C20.5376 12.0003 23 14.4627 23 17.5003ZM14.5 17.0003C14.2239 17.0003 14 17.2242 14 17.5003C14 17.7764 14.2239 18.0003 14.5 18.0003H19.2929L17.6464 19.6468C17.4512 19.842 17.4512 20.1586 17.6464 20.3539C17.8417 20.5491 18.1583 20.5491 18.3536 20.3539L20.8536 17.8539C21.0488 17.6586 21.0488 17.342 20.8536 17.1468L18.3536 14.6468C18.1583 14.4515 17.8417 14.4515 17.6464 14.6468C17.4512 14.842 17.4512 15.1586 17.6464 15.3539L19.2929 17.0003H14.5Z" 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/notebook_section_arrow_right_24_regular.svg";Details
| Name | Notebook Section Arrow Right |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_notebook_section_arrow_right_24_regular.svg |
| Filled file | ic_fluent_notebook_section_arrow_right_24_filled.svg |
| React components | NotebookSectionArrowRight24Regular, NotebookSectionArrowRight24Filled |
| License | MIT (© Microsoft Corporation) |