Reading List icon

Use the Reading List 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 { ReadingList24Regular, ReadingList24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ReadingList24Regular aria-label="Reading List" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_reading_list_24_regular.svg" width="24" height="24" alt="Reading List">

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="M7 18H20C20.4142 18 20.75 18.3358 20.75 18.75C20.75 19.1297 20.4678 19.4435 20.1018 19.4932L20 19.5H7C6.58579 19.5 6.25 19.1642 6.25 18.75C6.25 18.3703 6.53215 18.0565 6.89823 18.0068L7 18ZM17 15C17.4142 15 17.75 15.3358 17.75 15.75C17.75 16.1297 17.4678 16.4435 17.1018 16.4932L17 16.5H4C3.58579 16.5 3.25 16.1642 3.25 15.75C3.25 15.3703 3.53215 15.0565 3.89823 15.0068L4 15H17ZM20 12C20.4142 12 20.75 12.3358 20.75 12.75C20.75 13.1297 20.4678 13.4435 20.1018 13.4932L20 13.5H7C6.58579 13.5 6.25 13.1642 6.25 12.75C6.25 12.3703 6.53215 12.0565 6.89823 12.0068L7 12H20ZM6 5C7.12961 5 8.13161 5.68756 8.54908 6.71676C8.70478 7.10059 8.51983 7.53797 8.13599 7.69367C7.78414 7.83639 7.3873 7.69288 7.20368 7.37232L7.15908 7.28058C6.96925 6.8126 6.51369 6.5 6 6.5C5.30964 6.5 4.75 7.05964 4.75 7.75C4.75 8.44036 5.30964 9 6 9H17.5C17.9142 9 18.25 9.33579 18.25 9.75C18.25 10.1297 17.9678 10.4435 17.6018 10.4932L17.5 10.5H6C4.48122 10.5 3.25 9.26878 3.25 7.75C3.25 6.23122 4.48122 5 6 5ZM20 6C20.4142 6 20.75 6.33579 20.75 6.75C20.75 7.1297 20.4678 7.44349 20.1018 7.49315L20 7.5H11C10.5858 7.5 10.25 7.16421 10.25 6.75C10.25 6.3703 10.5322 6.05651 10.8982 6.00685L11 6H20Z" 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/reading_list_24_regular.svg";

Details

Keywords

readlistcontentcollectionnews