Call Dismiss icon
Used in call scenarios. The Call Dismiss 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 Dismiss 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 { CallDismiss24Regular, CallDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <CallDismiss24Regular aria-label="Call Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_call_dismiss_24_regular.svg" width="24" height="24" alt="Call Dismiss"> 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.50285ZM21.7808 2.22016C22.0737 2.51305 22.0737 2.98793 21.7808 3.28082L18.5611 6.50049L21.7808 9.72016C22.0737 10.0131 22.0737 10.4879 21.7808 10.7808C21.4879 11.0737 21.0131 11.0737 20.7202 10.7808L17.5005 7.56115L14.2808 10.7808C13.9879 11.0737 13.5131 11.0737 13.2202 10.7808C12.9273 10.4879 12.9273 10.0131 13.2202 9.72016L16.4398 6.50049L13.2202 3.28082C12.9273 2.98793 12.9273 2.51305 13.2202 2.22016C13.5131 1.92726 13.9879 1.92726 14.2808 2.22016L17.5005 5.43983L20.7202 2.22016C21.0131 1.92726 21.4879 1.92726 21.7808 2.22016Z" 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_dismiss_24_regular.svg";Details
| Name | Call Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_call_dismiss_24_regular.svg |
| Filled file | ic_fluent_call_dismiss_24_filled.svg |
| React components | CallDismiss24Regular, CallDismiss24Filled |
| License | MIT (© Microsoft Corporation) |