Call Outbound icon
Used in call scenarios. The Call Outbound 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 Outbound 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 { CallOutbound24Regular, CallOutbound24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallOutbound24Regular aria-label="Call Outbound" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_outbound_24_regular.svg" width="24" height="24" alt="Call Outbound"> 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="M9.5258 3.5721L10.4275 5.57782C10.9102 6.65165 10.6558 7.91366 9.79476 8.71661L8.30046 10.1101C8.25678 10.1508 8.22913 10.2058 8.2225 10.2652C8.17814 10.6623 8.44737 11.4357 9.06763 12.51C9.51868 13.2913 9.92693 13.8391 10.2744 14.1473C10.5165 14.362 10.6498 14.4084 10.7065 14.3915L12.7169 13.7769C13.8425 13.4328 15.0623 13.8431 15.751 14.7976L17.0317 16.5726C17.8378 17.6898 17.6928 19.2311 16.6926 20.1784L15.8062 21.0178C14.8498 21.9236 13.4882 22.2611 12.2195 21.907C9.46539 21.1383 6.99608 18.8141 4.78421 14.9831C2.56926 11.1467 1.79207 7.84222 2.50852 5.07043C2.81817 3.87242 3.69714 2.90908 4.8506 2.4872L5.05694 2.41844L6.22394 2.06668C7.54645 1.66804 8.95945 2.31227 9.5258 3.5721ZM6.65684 3.50285L5.48984 3.85461L5.33128 3.90891C4.65633 4.16847 4.14346 4.73908 3.96079 5.44581C3.35814 7.77732 4.047 10.7062 6.08325 14.2331C8.11678 17.7552 10.3057 19.8155 12.6227 20.4622C13.384 20.6747 14.2009 20.4722 14.7748 19.9287L15.6611 19.0893C16.1158 18.6587 16.1817 17.9581 15.8153 17.4503L14.5346 15.6753C14.2215 15.2415 13.667 15.0549 13.1554 15.2114L11.1401 15.8275C9.97036 16.1762 8.90869 15.2347 7.7686 13.26C7.00029 11.9293 6.6422 10.9006 6.73177 10.0987C6.77817 9.68322 6.97174 9.29812 7.27746 9.01303L8.77176 7.61958C9.16315 7.2546 9.27878 6.68096 9.05936 6.19286L8.15769 4.18714C7.90026 3.61449 7.25798 3.32165 6.65684 3.50285ZM14.7485 2.00166L21.2643 2.00185C21.2901 2.00104 21.3159 2.00286 21.3416 2.006L21.4031 2.01629L21.4982 2.04266L21.5868 2.08025L21.6543 2.11987C21.6988 2.14704 21.7411 2.18089 21.7802 2.21995C21.8187 2.25844 21.8522 2.30006 21.8805 2.34401L21.9226 2.41814L21.9644 2.52152L21.9885 2.6189L21.9994 2.71982L22 9.25561C22 9.66982 21.6642 10.0056 21.25 10.0056C20.8703 10.0056 20.5565 9.72345 20.5069 9.35738L20.5 9.25561L20.5 4.56122L14.28 10.7849C14.0138 11.0513 13.5972 11.0756 13.3035 10.8578L13.2194 10.7852C12.953 10.519 12.9287 10.1023 13.1465 9.80867L13.2191 9.72453L19.439 3.50122L14.7485 3.50172C14.3688 3.50172 14.055 3.21956 14.0053 2.85349L13.9985 2.75172C13.9985 2.3375 14.3343 2.00166 14.7485 2.00166Z" 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_outbound_24_regular.svg";Details
| Name | Call Outbound |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_outbound_24_regular.svg |
| Filled file | ic_fluent_call_outbound_24_filled.svg |
| React components | CallOutbound24Regular, CallOutbound24Filled |
| License | MIT (© Microsoft Corporation) |