Speaker Edit icon
Used in volume & various audio setting scenarios. The Speaker Edit 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 Speaker Edit 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 { SpeakerEdit24Regular, SpeakerEdit24Filled } from "@fluentui/react-icons";
export function Example() {
return <SpeakerEdit24Regular aria-label="Speaker Edit" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_speaker_edit_24_regular.svg" width="24" height="24" alt="Speaker Edit"> 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="M14.9989 4.25218C14.9989 3.17379 13.7246 2.60167 12.9185 3.3182L8.4274 7.31063C8.29012 7.43267 8.11281 7.50008 7.92912 7.50008H4.24981C3.00727 7.50008 2 8.50723 2 9.74961V14.2466C2 15.4889 3.00728 16.4961 4.24981 16.4961H7.92906C8.11278 16.4961 8.2901 16.5635 8.42739 16.6856L11.5504 19.4622C11.6929 18.961 11.9398 18.4965 12.2741 18.0988L9.42403 15.5649C9.01216 15.1987 8.4802 14.9964 7.92906 14.9964H4.24981C3.83563 14.9964 3.49987 14.6607 3.49987 14.2466V9.74961C3.49987 9.33548 3.83563 8.99977 4.24981 8.99977H7.92912C8.48021 8.99977 9.01213 8.79753 9.42398 8.43141L13.499 4.80885V16.8546L14.9989 15.3549V4.25218ZM20.0392 6.05542C21.1304 7.5285 21.8265 9.31281 21.9705 11.2494C21.4838 11.0483 20.9586 10.9692 20.4416 11.012C20.2667 9.50049 19.6953 8.11084 18.8339 6.94802C18.5874 6.61524 18.6573 6.14565 18.9902 5.89916C19.323 5.65268 19.7926 5.72264 20.0392 6.05542ZM18.1582 8.67309C18.6186 9.52346 18.9079 10.4798 18.9805 11.4946C18.7711 11.6249 18.5732 11.781 18.3913 11.9629L17.4199 12.9342C17.4717 12.631 17.4987 12.319 17.4987 12.0006C17.4987 11.0531 17.2597 10.1636 16.8392 9.38703C16.642 9.02284 16.7774 8.56779 17.1417 8.37064C17.5059 8.17349 17.961 8.3089 18.1582 8.67309ZM19.0984 12.6699L13.1965 18.5711C12.8524 18.9151 12.6083 19.3462 12.4902 19.8183L12.0326 21.6486C11.8336 22.4446 12.5547 23.1656 13.3507 22.9666L15.1813 22.509C15.6534 22.391 16.0846 22.1469 16.4287 21.8028L22.3306 15.9016C23.2231 15.0092 23.2231 13.5623 22.3306 12.6699C21.4381 11.7774 19.991 11.7774 19.0984 12.6699Z" 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/speaker_edit_24_regular.svg";Details
| Name | Speaker Edit |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_speaker_edit_24_regular.svg |
| Filled file | ic_fluent_speaker_edit_24_filled.svg |
| React components | SpeakerEdit24Regular, SpeakerEdit24Filled |
| License | MIT (© Microsoft Corporation) |