Fluent Icons

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 regular and filled styles in 4 sizes from 16 to 28 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

SVG

Filled

SVG
Xceed Toolkit Plus for WPF logoXceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_reading_list_add_24_regular.svg

Reading List Add icon in React

npm install @fluentui/react-icons

import { ReadingListAdd24Regular } from "@fluentui/react-icons";

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

Reading List Add icon in SVG

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/reading_list_add_24_regular.svg";

<!-- or load it from a CDN -->
<img src="https://cdn.jsdelivr.net/npm/@fluentui/svg-icons@1.1.341/icons/reading_list_add_24_regular.svg" width="24" height="24" alt="Reading List Add">

Reading List Add icon in Blazor

Microsoft's Fluent UI Blazor icons package:

dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

<FluentIcon Value="@(new Icons.Regular.Size24.ReadingListAdd())" />

Reading List Add icon in Flutter

flutter pub add fluentui_system_icons

import 'package:fluentui_system_icons/fluentui_system_icons.dart';

Icon(FluentIcons.reading_list_add_24_regular)

Reading List Add icon in WinUI / WPF

Add FluentSystemIcons-Regular.ttf from Microsoft's repository to your app, then use the glyph:

<!-- WinUI 3 (font in Assets/Fonts) -->
<FontIcon FontFamily="ms-appx:///Assets/Fonts/FluentSystemIcons-Regular.ttf#FluentSystemIcons-Regular" Glyph="&#xF657;" FontSize="24" />

<!-- WPF (font in Fonts/, Build Action: Resource) -->
<TextBlock FontFamily="pack://application:,,,/Fonts/#FluentSystemIcons-Regular" Text="&#xF657;" FontSize="24" />

Reading List Add icon in Icon font

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microsoft/fluentui-system-icons@9cf8af0f95a555918a60b8147a2f33a6a1248442/fonts/FluentSystemIcons-Regular.css">

<i class="icon-ic_fluent_reading_list_add_24_regular"></i>

/* or use the code point in your own CSS */
.icon::before {
  font-family: "FluentSystemIcons-Regular";
  content: "\f657";
  font-size: 24px;
}

Reading List Add icon in Android

// build.gradle
implementation("com.microsoft.design:fluent-system-icons:1.1.341@aar")

<!-- layout XML -->
<ImageView android:src="@drawable/ic_fluent_reading_list_add_24_regular" />

// Kotlin
R.drawable.ic_fluent_reading_list_add_24_regular

Reading List Add icon in iOS

# Podfile
pod "FluentIcons", "1.1.341"

import FluentIcons

UIImage(fluent: .readingListAdd24Regular)

Reading List Add icon in Power Apps

Paste into an Image control's Image property. The Copy button copies the full formula with this icon's SVG.

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'>…</svg>")

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" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

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>

Details

NameReading List Add
StylesRegular (outlined), Filled
Sizes16 px, 20 px, 24 px, 28 px
Regular (outlined) fileic_fluent_reading_list_add_24_regular.svg
Filled fileic_fluent_reading_list_add_24_filled.svg
React (Regular)ReadingListAdd16Regular, ReadingListAdd20Regular, ReadingListAdd24Regular, ReadingListAdd28Regular
React (Filled)ReadingListAdd16Filled, ReadingListAdd20Filled, ReadingListAdd24Filled, ReadingListAdd28Filled
LicenseMIT (© Microsoft Corporation)

Keywords

readlistcontentcollection

Related icons

Reading ListReading Mode MobileTask List AddTask List Square AddText Bullet List AddWindow Bullet List AddApps ListApps List DetailFolder ListStack AddBook AddBookmark Add