Reading List Add icon
Used to represent a collection of content. The Reading List Add 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 Reading List Add 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 { ReadingListAdd24Regular, ReadingListAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <ReadingListAdd24Regular aria-label="Reading List Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_reading_list_add_24_regular.svg" width="24" height="24" alt="Reading List Add"> 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 12C20.5376 12 23 14.4624 23 17.5C23 20.5376 20.5376 23 17.5 23C14.4624 23 12 20.5376 12 17.5C12 14.4624 14.4624 12 17.5 12ZM17.5 13.9992L17.4101 14.0073C17.206 14.0443 17.0451 14.2053 17.0081 14.4094L17 14.4992L16.9996 16.9992L14.4977 17L14.4078 17.0081C14.2037 17.0451 14.0427 17.206 14.0057 17.4101L13.9977 17.5L14.0057 17.5899C14.0427 17.794 14.2037 17.9549 14.4078 17.9919L14.4977 18L17.0007 17.9992L17.0011 20.5035L17.0092 20.5934C17.0462 20.7975 17.2071 20.9584 17.4112 20.9954L17.5011 21.0035L17.591 20.9954C17.7951 20.9584 17.956 20.7975 17.9931 20.5934L18.0011 20.5035L18.0007 17.9992L20.5046 18L20.5944 17.9919C20.7985 17.9549 20.9595 17.794 20.9965 17.5899L21.0046 17.5L20.9965 17.4101C20.9595 17.206 20.7985 17.0451 20.5944 17.0081L20.5046 17L17.9996 16.9992L18 14.4992L17.9919 14.4094C17.9549 14.2053 17.794 14.0443 17.5899 14.0073L17.5 13.9992ZM11.0189 17.9993C11.0584 18.5188 11.1589 19.0212 11.3133 19.4994L7 19.5C6.58579 19.5 6.25 19.1642 6.25 18.75C6.25 18.3703 6.53215 18.0565 6.89823 18.0068L7 18L11.0189 17.9993ZM11.498 15.0004C11.3003 15.4745 11.1572 15.977 11.0764 16.5001L4 16.5C3.58579 16.5 3.25 16.1642 3.25 15.75C3.25 15.3703 3.53215 15.0565 3.89823 15.0068L4 15L11.498 15.0004ZM14.035 11.9996C13.3991 12.401 12.8377 12.9097 12.3761 13.5001L7 13.5C6.58579 13.5 6.25 13.1642 6.25 12.75C6.25 12.3703 6.53215 12.0565 6.89823 12.0068L7 12L14.035 11.9996ZM6 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_add_24_regular.svg";Details
| Name | Reading List Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_reading_list_add_24_regular.svg |
| Filled file | ic_fluent_reading_list_add_24_filled.svg |
| React components | ReadingListAdd24Regular, ReadingListAdd24Filled |
| License | MIT (© Microsoft Corporation) |