read aloud icon
read-aloud-28-regular from Fluent UI System Icons by Microsoft Corporation · 28 Regular · MIT Free for personal and commercial use.
- Name
- read-aloud-28-regular
- Set
- Fluent UI System Icons
- Style
- 28 Regular
- Viewbox
- 28×28
- License
- MIT
8 other variants in Fluent UI System Icons
Use the read aloud icon
SVG
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M17.57 2.934a.75.75 0 0 1 .997-.364c2.587 1.205 7.232 5.02 6.933 12.211a.75.75 0 1 1-1.5-.062c.267-6.409-3.849-9.756-6.067-10.789a.75.75 0 0 1-.363-.997m-6.118 1.55a.75.75 0 0 0-1.403 0l-7 18.5a.75.75 0 1 0 1.403.531L6.539 18h8.423l2.087 5.515a.75.75 0 0 0 1.403-.53zM14.394 16.5H7.106l3.644-9.63zm3.792-9.86a.75.75 0 1 0-.872 1.22c1.68 1.2 3.186 2.683 3.186 5.39a.75.75 0 1 0 1.5 0c0-3.437-1.994-5.31-3.814-6.61"/></svg>
React
import type { SVGProps } from "react";
export function FluentReadAloud28Regular(props: SVGProps<SVGSVGElement>) {
return (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M17.57 2.934a.75.75 0 0 1 .997-.364c2.587 1.205 7.232 5.02 6.933 12.211a.75.75 0 1 1-1.5-.062c.267-6.409-3.849-9.756-6.067-10.789a.75.75 0 0 1-.363-.997m-6.118 1.55a.75.75 0 0 0-1.403 0l-7 18.5a.75.75 0 1 0 1.403.531L6.539 18h8.423l2.087 5.515a.75.75 0 0 0 1.403-.53zM14.394 16.5H7.106l3.644-9.63zm3.792-9.86a.75.75 0 1 0-.872 1.22c1.68 1.2 3.186 2.683 3.186 5.39a.75.75 0 1 0 1.5 0c0-3.437-1.994-5.31-3.814-6.61"/></svg>
);
}
Vue
<template> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 28 28"><path fill="currentColor" d="M17.57 2.934a.75.75 0 0 1 .997-.364c2.587 1.205 7.232 5.02 6.933 12.211a.75.75 0 1 1-1.5-.062c.267-6.409-3.849-9.756-6.067-10.789a.75.75 0 0 1-.363-.997m-6.118 1.55a.75.75 0 0 0-1.403 0l-7 18.5a.75.75 0 1 0 1.403.531L6.539 18h8.423l2.087 5.515a.75.75 0 0 0 1.403-.53zM14.394 16.5H7.106l3.644-9.63zm3.792-9.86a.75.75 0 1 0-.872 1.22c1.68 1.2 3.186 2.683 3.186 5.39a.75.75 0 1 0 1.5 0c0-3.437-1.994-5.31-3.814-6.61"/></svg> </template>
CSS
.icon-read-aloud-28-regular {
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.57%202.934a.75.75%200%200%201%20.997-.364c2.587%201.205%207.232%205.02%206.933%2012.211a.75.75%200%201%201-1.5-.062c.267-6.409-3.849-9.756-6.067-10.789a.75.75%200%200%201-.363-.997m-6.118%201.55a.75.75%200%200%200-1.403%200l-7%2018.5a.75.75%200%201%200%201.403.531L6.539%2018h8.423l2.087%205.515a.75.75%200%200%200%201.403-.53zM14.394%2016.5H7.106l3.644-9.63zm3.792-9.86a.75.75%200%201%200-.872%201.22c1.68%201.2%203.186%202.683%203.186%205.39a.75.75%200%201%200%201.5%200c0-3.437-1.994-5.31-3.814-6.61%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M17.57%202.934a.75.75%200%200%201%20.997-.364c2.587%201.205%207.232%205.02%206.933%2012.211a.75.75%200%201%201-1.5-.062c.267-6.409-3.849-9.756-6.067-10.789a.75.75%200%200%201-.363-.997m-6.118%201.55a.75.75%200%200%200-1.403%200l-7%2018.5a.75.75%200%201%200%201.403.531L6.539%2018h8.423l2.087%205.515a.75.75%200%200%200%201.403-.53zM14.394%2016.5H7.106l3.644-9.63zm3.792-9.86a.75.75%200%201%200-.872%201.22c1.68%201.2%203.186%202.683%203.186%205.39a.75.75%200%201%200%201.5%200c0-3.437-1.994-5.31-3.814-6.61%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/fluent/read-aloud-28-regular.svg?color=%231a73e8&size=48
