Read Aloud icon
Used to activate reading content out loud. The Read Aloud 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 Read Aloud 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 { ReadAloud24Regular, ReadAloud24Filled } from "@fluentui/react-icons";
export function Example() {
return <ReadAloud24Regular aria-label="Read Aloud" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_read_aloud_24_regular.svg" width="24" height="24" alt="Read Aloud"> 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.8614 2.09197C15.4979 1.89336 15.0422 2.02705 14.8436 2.39058C14.645 2.7541 14.7787 3.2098 15.1422 3.40841C16.9956 4.42106 18.3577 5.69397 19.2441 7.22942C20.1305 8.76488 20.5518 10.581 20.502 12.6925C20.4923 13.1066 20.82 13.4503 21.2341 13.46C21.6482 13.4698 21.9918 13.142 22.0016 12.7279C22.0576 10.3516 21.5734 8.26391 20.5431 6.47937C19.5129 4.69483 17.9471 3.2316 15.8614 2.09197ZM15.6238 5.69287C15.2602 5.49456 14.8046 5.62863 14.6063 5.99232C14.408 6.35601 14.5421 6.8116 14.9057 7.00991C15.6273 7.40337 16.2028 7.97328 16.6411 8.73239C17.0793 9.49151 17.2851 10.2749 17.265 11.0966C17.2549 11.5107 17.5824 11.8546 17.9965 11.8647C18.4106 11.8748 18.7545 11.5473 18.7646 11.1332C18.7914 10.032 18.5144 8.97709 17.9401 7.98234C17.3658 6.9876 16.5908 6.22018 15.6238 5.69287ZM9.0002 3.99868C9.30769 3.99868 9.58403 4.18638 9.69738 4.47224L15.4474 18.9733C15.6001 19.3583 15.4117 19.7943 15.0267 19.947C14.6416 20.0997 14.2057 19.9113 14.053 19.5262L12.258 14.9994H5.74236L3.94738 19.5262C3.79469 19.9113 3.35877 20.0997 2.97373 19.947C2.58869 19.7943 2.40033 19.3583 2.55302 18.9733L8.30302 4.47224C8.41637 4.18638 8.69271 3.99868 9.0002 3.99868ZM9.0002 6.78346L6.33719 13.4993H11.6632L9.0002 6.78346Z" 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/read_aloud_24_regular.svg";Details
| Name | Read Aloud |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_read_aloud_24_regular.svg |
| Filled file | ic_fluent_read_aloud_24_filled.svg |
| React components | ReadAloud24Regular, ReadAloud24Filled |
| License | MIT (© Microsoft Corporation) |