Call Warning icon
Used in call transferring issues. The Call Warning 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 Warning 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 { CallWarning24Regular, CallWarning24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallWarning24Regular aria-label="Call Warning" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_warning_24_regular.svg" width="24" height="24" alt="Call Warning"> 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.22386 2.0645C7.54637 1.66586 8.95927 2.31053 9.52562 3.57036L10.427 5.57622C10.9096 6.64999 10.6561 7.91196 9.79515 8.71489L8.30004 10.1084C8.25671 10.149 8.22959 10.2038 8.22289 10.2627C8.17853 10.6599 8.44742 11.4336 9.06761 12.5079C9.51866 13.2891 9.92715 13.8374 10.2746 14.1456C10.5162 14.3597 10.6494 14.4063 10.7063 14.3897L12.717 13.7745C13.8425 13.4305 15.0626 13.8415 15.7512 14.7959L17.0315 16.5704C17.8376 17.6876 17.6929 19.2295 16.6926 20.1768L15.8059 21.0157C14.8496 21.9213 13.4885 22.2592 12.22 21.9053C9.46596 21.1366 6.99623 18.8123 4.78441 14.9815C2.56948 11.1451 1.79161 7.84018 2.50804 5.0684C2.8177 3.87039 3.69735 2.90727 4.85082 2.4854L5.05687 2.41606L6.22386 2.0645ZM8.15746 4.18559C7.90002 3.61294 7.25762 3.31982 6.65648 3.50102L5.48949 3.85258L5.33129 3.90727C4.65655 4.16678 4.14394 4.73695 3.96117 5.4434C3.35852 7.77492 4.04699 10.7046 6.08324 14.2315C8.11658 17.7533 10.3055 19.8131 12.6223 20.46C13.3835 20.6725 14.2008 20.4702 14.7746 19.9268L15.6614 19.087C16.1157 18.6564 16.1819 17.956 15.8157 17.4483L14.5344 15.6729C14.2213 15.2394 13.6669 15.0527 13.1555 15.209L11.1399 15.8252C9.97021 16.1738 8.90884 15.2325 7.76879 13.2579C7.00053 11.9272 6.64212 10.8987 6.73168 10.0967C6.77808 9.68129 6.97186 9.29587 7.27757 9.01079L8.77172 7.61723C9.16297 7.25225 9.2792 6.67851 9.0598 6.19047L8.15746 4.18559ZM15.1614 1.83012C15.7145 0.72344 17.2939 0.723389 17.8469 1.83012L21.844 9.82817C22.3426 10.8259 21.6167 11.9998 20.5012 12H12.5071C11.3913 12 10.6656 10.8261 11.1643 9.82817L15.1614 1.83012ZM16.5041 8.99809C16.2279 8.99809 16.0034 9.22197 16.0032 9.49809C16.0032 9.77439 16.2278 9.99907 16.5041 9.99907C16.7804 9.99895 17.0041 9.77432 17.0041 9.49809C17.0039 9.22205 16.7803 8.99821 16.5041 8.99809ZM16.5041 3.99516C16.2279 3.99516 16.0034 4.21908 16.0032 4.49516V7.49711C16.0032 7.77341 16.2278 7.99809 16.5041 7.99809C16.7804 7.99797 17.0041 7.77334 17.0041 7.49711V4.49516C17.0039 4.21915 16.7802 3.99528 16.5041 3.99516Z" 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_warning_24_regular.svg";Details
| Name | Call Warning |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_warning_24_regular.svg |
| Filled file | ic_fluent_call_warning_24_filled.svg |
| React components | CallWarning24Regular, CallWarning24Filled |
| License | MIT (© Microsoft Corporation) |