Call icon

Use the Call 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 { Call24Regular, Call24Filled } from "@fluentui/react-icons";

export function Example() {
  return <Call24Regular aria-label="Call" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_call_24_regular.svg" width="24" height="24" alt="Call">

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="M7.05694 2.41844L8.22394 2.06668C9.54645 1.66804 10.9594 2.31227 11.5258 3.5721L12.4275 5.57782C12.9102 6.65165 12.6558 7.91366 11.7948 8.71661L10.3005 10.1101C10.2568 10.1508 10.2291 10.2058 10.2225 10.2652C10.1781 10.6623 10.4474 11.4357 11.0676 12.51C11.5187 13.2913 11.9269 13.8391 12.2744 14.1473C12.5165 14.362 12.6498 14.4084 12.7065 14.3915L14.7169 13.7769C15.8425 13.4328 17.0623 13.8431 17.751 14.7976L19.0317 16.5726C19.8378 17.6898 19.6928 19.2311 18.6926 20.1784L17.8062 21.0178C16.8498 21.9236 15.4882 22.2611 14.2195 21.907C11.4654 21.1383 8.99608 18.8141 6.78421 14.9831C4.56926 11.1467 3.79207 7.84222 4.50852 5.07043C4.83639 3.80195 5.80252 2.79656 7.05694 2.41844ZM7.48984 3.85461C6.73719 4.08148 6.15751 4.68472 5.96079 5.44581C5.35814 7.77732 6.047 10.7062 8.08325 14.2331C10.1168 17.7552 12.3057 19.8155 14.6227 20.4622C15.384 20.6747 16.2009 20.4722 16.7748 19.9287L17.6611 19.0893C18.1158 18.6587 18.1817 17.9581 17.8153 17.4503L16.5346 15.6753C16.2215 15.2415 15.667 15.0549 15.1554 15.2114L13.1401 15.8275C11.9704 16.1762 10.9087 15.2347 9.7686 13.26C9.00029 11.9293 8.6422 10.9006 8.73177 10.0987C8.77817 9.68322 8.97174 9.29812 9.27746 9.01303L10.7718 7.61958C11.1632 7.2546 11.2788 6.68096 11.0594 6.19286L10.1577 4.18714C9.90026 3.61449 9.25798 3.32165 8.65684 3.50285L7.48984 3.85461Z" 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_24_regular.svg";

Details

Keywords

handsetaudio