Call Forward icon
Used in call scenarios. The Call Forward 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 Forward 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 { CallForward24Regular, CallForward24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallForward24Regular aria-label="Call Forward" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_forward_24_regular.svg" width="24" height="24" alt="Call Forward"> 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.98012 2.05448L10.2016 2.09956L11.0179 2.2914C12.3625 2.60742 13.2641 3.87185 13.1246 5.24607L12.9467 7.00025C12.8278 8.17158 11.9765 9.13731 10.8293 9.40216L9.14371 9.79131C9.07826 9.80642 9.02165 9.84722 8.98662 9.90452C8.79014 10.2259 8.66724 10.9381 8.66724 12.0022C8.66724 12.7884 8.73328 13.3877 8.85546 13.788C8.89834 13.9285 8.94032 14.0263 8.97116 14.0891L9.02 14.1796L9.06008 14.1938L10.8298 14.6024C11.9766 14.8671 12.8278 15.8324 12.947 17.0034L13.1247 18.7487C13.2642 20.1192 12.368 21.3816 11.0281 21.7018L10.2112 21.897C8.87929 22.2154 7.47972 21.7823 6.56031 20.7674C4.83887 18.8671 4 15.9381 4 12.0022C4 8.05987 4.84164 5.12766 6.56881 3.22765C7.43411 2.27577 8.72262 1.8377 9.98012 2.05448ZM7.67875 4.23663C6.24088 5.81839 5.5 8.39955 5.5 12.0022C5.5 15.5992 6.23856 18.178 7.672 19.7603C8.22365 20.3693 9.06339 20.6291 9.86256 20.4381L10.6794 20.2429C11.2884 20.0973 11.6958 19.5236 11.6324 18.9006L11.4547 17.1553C11.4006 16.623 11.0137 16.1843 10.4924 16.0639L8.67217 15.6418L8.53664 15.5988C7.53818 15.2231 7.16724 14.0078 7.16724 12.0022C7.16724 10.6845 7.33067 9.73746 7.70682 9.12216C7.95199 8.7211 8.3482 8.43553 8.80625 8.32976L10.4919 7.9406C11.0133 7.82022 11.4003 7.38125 11.4543 6.84882L11.6323 5.09464C11.6957 4.47 11.2859 3.89526 10.6747 3.75161L9.85844 3.55978L9.68748 3.5265C8.94512 3.41158 8.1892 3.6751 7.67875 4.23663ZM15.6471 7.30379L15.7197 7.21968C15.986 6.95345 16.4027 6.92929 16.6963 7.14719L16.7804 7.21982L20.777 11.2175C21.0431 11.4836 21.0674 11.8999 20.8499 12.1935L20.7774 12.2776L16.7808 16.281C16.4881 16.5742 16.0133 16.5746 15.7201 16.282C15.4536 16.0159 15.4291 15.5993 15.6467 15.3055L15.7192 15.2213L18.43 12.505L12.0005 12.505C11.6208 12.505 11.3071 12.2229 11.2574 11.8568L11.2505 11.755C11.2505 11.3753 11.5327 11.0615 11.8988 11.0119L12.0005 11.005L18.443 11.005L15.7196 8.28034C15.4534 8.01404 15.4292 7.59737 15.6471 7.30379L15.7197 7.21968L15.6471 7.30379Z" 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_forward_24_regular.svg";Details
| Name | Call Forward |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_forward_24_regular.svg |
| Filled file | ic_fluent_call_forward_24_filled.svg |
| React components | CallForward24Regular, CallForward24Filled |
| License | MIT (© Microsoft Corporation) |