Call Transfer icon
Used in call scenarios. The Call Transfer 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 Transfer 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 { CallTransfer24Regular, CallTransfer24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallTransfer24Regular aria-label="Call Transfer" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_transfer_24_regular.svg" width="24" height="24" alt="Call Transfer"> 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="M6.22394 2.06668L5.05694 2.41844C3.80252 2.79656 2.83639 3.80195 2.50852 5.07043C1.79207 7.84222 2.56926 11.1467 4.78421 14.9831C6.99608 18.8141 9.46539 21.1383 12.2195 21.907C13.4882 22.2611 14.8498 21.9236 15.8062 21.0178L16.6926 20.1784C17.6928 19.2311 17.8378 17.6898 17.0317 16.5726L15.751 14.7976C15.0623 13.8431 13.8425 13.4328 12.7169 13.7769L10.7065 14.3915C10.6498 14.4084 10.5165 14.362 10.2744 14.1473C9.92693 13.8391 9.51868 13.2913 9.06763 12.51C8.44737 11.4357 8.17814 10.6623 8.2225 10.2652C8.22913 10.2058 8.25678 10.1508 8.30046 10.1101L9.79476 8.71661C10.6558 7.91366 10.9102 6.65165 10.4275 5.57782L9.5258 3.5721C8.95945 2.31227 7.54645 1.66804 6.22394 2.06668ZM3.96079 5.44581C4.15751 4.68472 4.73719 4.08148 5.48984 3.85461L6.65684 3.50285C7.25798 3.32165 7.90026 3.61449 8.15769 4.18714L9.05936 6.19286C9.27878 6.68096 9.16315 7.2546 8.77176 7.61958L7.27746 9.01303C6.97174 9.29812 6.77817 9.68322 6.73177 10.0987C6.6422 10.9006 7.00029 11.9293 7.7686 13.26C8.90869 15.2347 9.97036 16.1762 11.1401 15.8275L13.1554 15.2114C13.667 15.0549 14.2215 15.2415 14.5346 15.6753L15.8153 17.4503C16.1817 17.9581 16.1158 18.6587 15.6611 19.0893L14.7748 19.9287C14.2009 20.4722 13.384 20.6747 12.6227 20.4622C10.3057 19.8155 8.11678 17.7552 6.08325 14.2331C4.047 10.7062 3.35814 7.77732 3.96079 5.44581ZM14.0004 2.75042C14.0004 2.33621 14.3362 2.00042 14.7504 2.00042H21.2504C21.6646 2.00042 22.0004 2.33621 22.0004 2.75042V9.25042C22.0004 9.66463 21.6646 10.0004 21.2504 10.0004C20.8362 10.0004 20.5004 9.66463 20.5004 9.25042V4.56108L16.5307 8.53075C16.2378 8.82364 15.7629 8.82364 15.47 8.53075C15.1772 8.23786 15.1772 7.76298 15.47 7.47009L19.4397 3.50042H14.7504C14.3362 3.50042 14.0004 3.16463 14.0004 2.75042ZM14.0004 10.7504C14.4146 10.7504 14.7504 10.4146 14.7504 10.0004C14.7504 9.58621 14.4146 9.25042 14.0004 9.25042C13.5862 9.25042 13.2504 9.58621 13.2504 10.0004C13.2504 10.4146 13.5862 10.7504 14.0004 10.7504ZM12.7504 12.0004C12.7504 12.4146 12.4146 12.7504 12.0004 12.7504C11.5862 12.7504 11.2504 12.4146 11.2504 12.0004C11.2504 11.5862 11.5862 11.2504 12.0004 11.2504C12.4146 11.2504 12.7504 11.5862 12.7504 12.0004Z" 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_transfer_24_regular.svg";Details
| Name | Call Transfer |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_transfer_24_regular.svg |
| Filled file | ic_fluent_call_transfer_24_filled.svg |
| React components | CallTransfer24Regular, CallTransfer24Filled |
| License | MIT (© Microsoft Corporation) |