Channel Dismiss icon
Used for chat channel scenarios. The Channel 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 Channel 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 { ChannelDismiss24Regular, ChannelDismiss24Filled } from "@fluentui/react-icons";
export function Example() {
return <ChannelDismiss24Regular aria-label="Channel Dismiss" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_channel_dismiss_24_regular.svg" width="24" height="24" alt="Channel 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="M17.5001 12C20.5377 12 23.0001 14.4624 23.0001 17.5C23.0001 20.5376 20.5377 23 17.5001 23C14.4625 23 12.0001 20.5376 12.0001 17.5C12.0001 14.4624 14.4625 12 17.5001 12ZM4.50031 9.37208L4.5001 17.75C4.5001 18.6682 5.20721 19.4212 6.10657 19.4942L6.2501 19.5L11.3137 19.5004C11.4862 20.0342 11.7259 20.5378 12.0227 21.0012L6.2501 21C4.51707 21 3.10086 19.6435 3.00525 17.9344L3.0001 17.75L2.99981 9.37208C3.23448 9.45505 3.48702 9.5002 3.7501 9.5002C4.01315 9.5002 4.26566 9.45506 4.50031 9.37208ZM15.0931 14.9663L15.0239 15.0241L14.966 15.0934C14.8479 15.2639 14.8479 15.4915 14.966 15.662L15.0239 15.7312L16.7935 17.5007L15.0265 19.2675L14.9686 19.3367C14.8505 19.5072 14.8505 19.7348 14.9686 19.9053L15.0265 19.9746L15.0957 20.0325C15.2662 20.1506 15.4938 20.1506 15.6643 20.0325L15.7336 19.9746L17.5005 18.2077L19.2695 19.9768L19.3387 20.0347C19.5093 20.1528 19.7368 20.1528 19.9074 20.0347L19.9766 19.9768L20.0345 19.9076C20.1526 19.7371 20.1526 19.5095 20.0345 19.339L19.9766 19.2697L18.2075 17.5007L19.9794 15.7313L20.0372 15.662C20.1553 15.4915 20.1553 15.2639 20.0372 15.0934L19.9794 15.0242L19.9101 14.9663C19.7396 14.8482 19.512 14.8482 19.3415 14.9663L19.2723 15.0242L17.5005 16.7937L15.731 15.0241L15.6618 14.9663C15.5156 14.865 15.3275 14.8506 15.1694 14.9229L15.0931 14.9663ZM12.8066 13.0032C12.3808 13.4475 12.0175 13.9521 11.7308 14.5029L8.74786 14.5031C8.33365 14.5031 7.99786 14.1673 7.99786 13.7531C7.99786 13.3734 8.28002 13.0596 8.64609 13.0099L8.74786 13.0031L12.8066 13.0032ZM17.7501 3C19.4831 3 20.8993 4.35645 20.995 6.06558L21.0001 6.25L21.0008 12.0223C20.5375 11.7256 20.0341 11.486 19.5005 11.3136L19.5001 6.25C19.5001 5.33183 18.793 4.57881 17.8936 4.5058L17.7501 4.5H6.2501C5.64992 4.5 5.12031 4.80213 4.80507 5.2626C4.49114 5.095 4.13172 5 3.7501 5C3.56887 5 3.39265 5.02142 3.22383 5.06188C3.67711 3.90899 4.77007 3.07762 6.06568 3.00514L6.2501 3H17.7501ZM15.2523 9.49623C15.6666 9.49623 16.0023 9.83201 16.0023 10.2462C16.0023 10.6259 15.7202 10.9397 15.3541 10.9894L15.2523 10.9962H8.74786C8.33365 10.9962 7.99786 10.6604 7.99786 10.2462C7.99786 9.86653 8.28002 9.55274 8.64609 9.50307L8.74786 9.49623H15.2523ZM3.7501 6C4.44051 6 5.0002 6.55969 5.0002 7.2501C5.0002 7.94051 4.44051 8.5002 3.7501 8.5002C3.05969 8.5002 2.5 7.94051 2.5 7.2501C2.5 6.55969 3.05969 6 3.7501 6Z" 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/channel_dismiss_24_regular.svg";Details
| Name | Channel Dismiss |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_channel_dismiss_24_regular.svg |
| Filled file | ic_fluent_channel_dismiss_24_filled.svg |
| React components | ChannelDismiss24Regular, ChannelDismiss24Filled |
| License | MIT (© Microsoft Corporation) |