Person Voice icon

Use the Person Voice 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 { PersonVoice24Regular, PersonVoice24Filled } from "@fluentui/react-icons";

export function Example() {
  return <PersonVoice24Regular aria-label="Person Voice" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_person_voice_24_regular.svg" width="24" height="24" alt="Person Voice">

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="M20.3917 0.465747C20.7549 0.266763 21.2108 0.399958 21.4097 0.763247C22.4242 2.61541 23.0007 4.7414 23.0007 6.9998C23.0007 9.2582 22.4242 11.3842 21.4097 13.2364C21.2108 13.5996 20.7549 13.7328 20.3917 13.5339C20.0284 13.3349 19.8952 12.8791 20.0942 12.5158C20.9907 10.8789 21.5007 9.00006 21.5007 6.9998C21.5007 4.99955 20.9907 3.12066 20.0942 1.48383C19.8952 1.12054 20.0284 0.66473 20.3917 0.465747ZM17.2903 3.06075C17.6709 2.89745 18.1119 3.07365 18.2752 3.45432C18.7424 4.54329 19.0007 5.74234 19.0007 6.99978C19.0007 8.25721 18.7424 9.45626 18.2752 10.5452C18.1119 10.9259 17.6709 11.1021 17.2903 10.9388C16.9096 10.7755 16.7334 10.3345 16.8967 9.95386C17.2852 9.0483 17.5007 8.05017 17.5007 6.99978C17.5007 5.94938 17.2852 4.95125 16.8967 4.04569C16.7334 3.66502 16.9096 3.22405 17.2903 3.06075ZM18.0034 16.2486C18.0034 15.0066 16.9966 13.9997 15.7545 13.9997H4.25278C3.01076 13.9997 2.00391 15.0066 2.00391 16.2486V16.8262C2.00391 17.719 2.32242 18.5825 2.90219 19.2614C4.46849 21.0957 6.8545 22.0008 10.0004 22.0008C13.1457 22.0008 15.5329 21.096 17.1023 19.2625C17.6838 18.5831 18.0034 17.7183 18.0034 16.824V16.2486ZM4.25278 15.4997H15.7545C16.1681 15.4997 16.5034 15.835 16.5034 16.2486V16.824C16.5034 17.3606 16.3117 17.8795 15.9627 18.2871C14.7063 19.755 12.7387 20.5008 10.0004 20.5008C7.26206 20.5008 5.29618 19.7551 4.04287 18.2874C3.69502 17.88 3.50391 17.3619 3.50391 16.8262V16.2486C3.50391 15.835 3.83919 15.4997 4.25278 15.4997ZM15.0004 7.0044C15.0004 4.24297 12.7618 2.0044 10.0004 2.0044C7.23894 2.0044 5.00036 4.24297 5.00036 7.0044C5.00036 9.76582 7.23894 12.0044 10.0004 12.0044C12.7618 12.0044 15.0004 9.76582 15.0004 7.0044ZM6.50036 7.0044C6.50036 5.0714 8.06737 3.5044 10.0004 3.5044C11.9334 3.5044 13.5004 5.0714 13.5004 7.0044C13.5004 8.93739 11.9334 10.5044 10.0004 10.5044C8.06737 10.5044 6.50036 8.93739 6.50036 7.0044Z" 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/person_voice_24_regular.svg";

Details

Keywords

humanpatientcontactguestaudiotalkmeetingsound.usedinawiderangeofscenarios-representingageneralpersonacontactcontactlistssharingandmanagingaccess.