Voicemail Shield icon

Use the Voicemail Shield 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 { VoicemailShield24Regular, VoicemailShield24Filled } from "@fluentui/react-icons";

export function Example() {
  return <VoicemailShield24Regular aria-label="Voicemail Shield" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_voicemail_shield_24_regular.svg" width="24" height="24" alt="Voicemail Shield">

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="M19.7488 4C20.9915 4 21.9988 5.00736 21.9988 6.25V11.6033C21.4048 11.3547 20.8923 11.0345 20.4988 10.7464V6.25C20.4988 5.83579 20.163 5.5 19.7488 5.5H4.25C3.83579 5.5 3.5 5.83579 3.5 6.25V17.7546C3.5 18.1688 3.83579 18.5046 4.25 18.5046H13.1551C13.2743 19.0528 13.4567 19.5518 13.6832 20.0046H4.25C3.00736 20.0046 2 18.9972 2 17.7546V6.25C2 5.00736 3.00736 4 4.25 4H19.7488ZM16 9C16.9526 9 17.8016 9.44403 18.3511 10.1364C18.2136 10.1972 18.0833 10.2783 17.9648 10.3797C17.7565 10.5581 17.4708 10.7818 17.1238 11.0064C16.849 10.6958 16.4474 10.5 16 10.5C15.1716 10.5 14.5 11.1716 14.5 12L14.5 12.003C14.4699 12.0063 14.4397 12.0093 14.4095 12.0121C13.876 12.0603 13.3715 12.3932 13.1371 12.8991C13.048 12.6153 13 12.3132 13 12C13 11.4537 13.146 10.9415 13.4012 10.5003H10.5988C10.854 10.9415 11 11.4537 11 12C11 13.6569 9.65685 15 8 15C6.34315 15 5 13.6569 5 12C5 10.4023 6.24892 9.09634 7.82373 9.00509L8 9H15.7482L15.8304 9.00444L16 9ZM8 10.5C7.17157 10.5 6.5 11.1716 6.5 12C6.5 12.8284 7.17157 13.5 8 13.5C8.82843 13.5 9.5 12.8284 9.5 12C9.5 11.1716 8.82843 10.5 8 10.5ZM19.3852 11.1394C20.0663 11.7228 21.5936 12.8356 23.5005 13.008C23.7755 13.0329 24 13.2543 24 13.5301L23.9999 17.0257C23.9999 21.2429 19.9067 22.7346 19.1275 22.9803C19.0442 23.0066 18.9563 23.0066 18.873 22.9803C18.0938 22.7346 14.0002 21.2429 14.0002 17.0257L14 13.5301C14 13.2543 14.2245 13.0329 14.4995 13.008C16.4061 12.8355 17.9339 11.7227 18.6153 11.1393C18.8322 10.9535 19.1683 10.9536 19.3852 11.1394Z" 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/voicemail_shield_24_regular.svg";

Details

Keywords

tapeplaybackaudiorecordingmessageprotectsecuritysafety