Channel Share icon

Use the Channel Share 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 { ChannelShare24Regular, ChannelShare24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChannelShare24Regular aria-label="Channel Share" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_channel_share_24_regular.svg" width="24" height="24" alt="Channel Share">

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="M3 6.25C3 4.45507 4.45507 3 6.25 3H12.25C14.0449 3 15.5 4.45507 15.5 6.25C15.5 6.66421 15.1642 7 14.75 7C14.3358 7 14 6.66421 14 6.25C14 5.2835 13.2165 4.5 12.25 4.5H6.25C5.2835 4.5 4.5 5.2835 4.5 6.25V12.25C4.5 13.2165 5.2835 14 6.25 14H12.1035C12.43 12.8457 13.4912 12 14.75 12C16.2688 12 17.5 13.2312 17.5 14.75C17.5 16.2688 16.2688 17.5 14.75 17.5C13.4912 17.5 12.43 16.6543 12.1035 15.5H6.25C4.45507 15.5 3 14.0449 3 12.25V6.25ZM13.5 14.75C13.5 15.4404 14.0596 16 14.75 16C15.4404 16 16 15.4404 16 14.75C16 14.0596 15.4404 13.5 14.75 13.5C14.0596 13.5 13.5 14.0596 13.5 14.75ZM17.75 10C18.7165 10 19.5 10.7835 19.5 11.75V17.75C19.5 18.7165 18.7165 19.5 17.75 19.5H11.75C10.7835 19.5 10 18.7165 10 17.75C10 17.3358 9.66421 17 9.25 17C8.83579 17 8.5 17.3358 8.5 17.75C8.5 19.5449 9.95507 21 11.75 21H17.75C19.5449 21 21 19.5449 21 17.75V11.75C21 9.95507 19.5449 8.5 17.75 8.5H11.8965C11.57 7.34575 10.5088 6.5 9.25 6.5C7.73122 6.5 6.5 7.73122 6.5 9.25C6.5 10.7688 7.73122 12 9.25 12C10.5088 12 11.57 11.1543 11.8965 10H17.75ZM9.25 8C9.94036 8 10.5 8.55964 10.5 9.25C10.5 9.94036 9.94036 10.5 9.25 10.5C8.55964 10.5 8 9.94036 8 9.25C8 8.55964 8.55964 8 9.25 8Z" 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_share_24_regular.svg";

Details

Keywords

rectanglechatannouncementshare