Call Add icon
Used in call scenarios. The Call Add 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 Add 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 { CallAdd24Regular, CallAdd24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallAdd24Regular aria-label="Call Add" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_add_24_regular.svg" width="24" height="24" alt="Call Add"> 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.83639 3.80195 3.80252 2.79656 5.05694 2.41844L6.22394 2.06668C7.54645 1.66804 8.95945 2.31227 9.5258 3.5721ZM6.65684 3.50285L5.48984 3.85461C4.73719 4.08148 4.15751 4.68472 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.50285ZM17.1488 2.0043L17.2506 1.99745C17.6303 1.99745 17.9441 2.2796 17.9938 2.64568L18.0006 2.74745L18 6.00122L21.2523 6.0021C21.632 6.0021 21.9458 6.28425 21.9955 6.65033L22.0023 6.7521C22.0023 7.1318 21.7202 7.44559 21.3541 7.49525L21.2523 7.5021L18 7.50122L18.0006 10.7504C18.0006 11.1301 17.7184 11.4439 17.3524 11.4936L17.2506 11.5004C16.8709 11.5004 16.5571 11.2183 16.5074 10.8522L16.5006 10.7504L16.5 7.50122L13.2489 7.5021C12.8692 7.5021 12.5554 7.21995 12.5057 6.85387L12.4989 6.7521C12.4989 6.37241 12.781 6.05861 13.1471 6.00895L13.2489 6.0021L16.5 6.00122L16.5006 2.74745C16.5006 2.36775 16.7828 2.05396 17.1488 2.0043L17.2506 1.99745L17.1488 2.0043Z" 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_add_24_regular.svg";Details
| Name | Call Add |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_add_24_regular.svg |
| Filled file | ic_fluent_call_add_24_filled.svg |
| React components | CallAdd24Regular, CallAdd24Filled |
| License | MIT (© Microsoft Corporation) |