Call Pause icon
Used in call scenarios. The Call Pause 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 Call Pause 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 { CallPause24Regular, CallPause24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallPause24Regular aria-label="Call Pause" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_pause_24_regular.svg" width="24" height="24" alt="Call Pause"> 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.5005 2.75C15.5005 2.33579 15.1647 2 14.7505 2C14.3363 2 14.0005 2.33579 14.0005 2.75V10.25C14.0005 10.6642 14.3363 11 14.7505 11C15.1647 11 15.5005 10.6642 15.5005 10.25V2.75ZM19.5005 2.75C19.5005 2.33579 19.1647 2 18.7505 2C18.3363 2 18.0005 2.33579 18.0005 2.75V10.25C18.0005 10.6642 18.3363 11 18.7505 11C19.1647 11 19.5005 10.6642 19.5005 10.25V2.75ZM10.4275 5.6286L9.5258 3.62288C8.95945 2.36305 7.54645 1.71882 6.22394 2.11746L5.05694 2.46922L4.8506 2.53799C3.69714 2.95986 2.81817 3.9232 2.50852 5.12121C1.79207 7.893 2.56926 11.1974 4.78421 15.0338C6.99608 18.8649 9.46539 21.189 12.2195 21.9578C13.4882 22.3119 14.8498 21.9744 15.8062 21.0686L16.6926 20.2292C17.6928 19.2819 17.8378 17.7406 17.0317 16.6234L15.751 14.8484C15.0623 13.8939 13.8425 13.4835 12.7169 13.8277L10.7065 14.4423C10.6498 14.4592 10.5165 14.4128 10.2744 14.1981C9.92693 13.8899 9.51868 13.3421 9.06763 12.5608C8.44737 11.4865 8.17814 10.7131 8.2225 10.3159C8.22913 10.2566 8.25678 10.2016 8.30046 10.1608L9.79476 8.76739C10.6558 7.96444 10.9102 6.70244 10.4275 5.6286ZM5.48984 3.9054L6.65684 3.55363C7.25798 3.37243 7.90026 3.66527 8.15769 4.23792L9.05936 6.24364C9.27878 6.73174 9.16315 7.30538 8.77176 7.67036L7.27746 9.06381C6.97174 9.3489 6.77817 9.734 6.73177 10.1494C6.6422 10.9514 7.00029 11.9801 7.7686 13.3108C8.90869 15.2855 9.97036 16.227 11.1401 15.8783L13.1554 15.2621C13.667 15.1057 14.2215 15.2922 14.5346 15.7261L15.8153 17.5011C16.1817 18.0089 16.1158 18.7095 15.6611 19.1401L14.7748 19.9795C14.2009 20.523 13.384 20.7255 12.6227 20.513C10.3057 19.8663 8.11678 17.806 6.08325 14.2838C4.047 10.757 3.35814 7.82811 3.96079 5.49659C4.14346 4.78986 4.65633 4.21925 5.33128 3.95969L5.48984 3.9054Z" 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/call_pause_24_regular.svg";Details
| Name | Call Pause |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_pause_24_regular.svg |
| Filled file | ic_fluent_call_pause_24_filled.svg |
| React components | CallPause24Regular, CallPause24Filled |
| License | MIT (© Microsoft Corporation) |