Channel Arrow Left icon

Use the Channel Arrow Left 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 { ChannelArrowLeft24Regular, ChannelArrowLeft24Filled } from "@fluentui/react-icons";

export function Example() {
  return <ChannelArrowLeft24Regular aria-label="Channel Arrow Left" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_channel_arrow_left_24_regular.svg" width="24" height="24" alt="Channel Arrow Left">

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.37208ZM16.7193 14.5886L16.6501 14.6464L14.1345 17.1628L14.0938 17.2134L14.0497 17.2901L14.0269 17.3488L14.008 17.4341L14.0056 17.5443L14.0206 17.6296L14.0496 17.7098L14.0835 17.7711L14.1344 17.8371L16.6501 20.3536C16.8453 20.5488 17.1619 20.5488 17.3572 20.3536C17.5307 20.18 17.55 19.9106 17.415 19.7157L17.3572 19.6464L15.7111 18H20.5001C20.7456 18 20.9497 17.8231 20.992 17.5899L21.0001 17.5C21.0001 17.2545 20.8232 17.0504 20.59 17.0081L20.5001 17H15.7111L17.3572 15.3536C17.5307 15.18 17.55 14.9106 17.415 14.7157L17.3572 14.6464C17.1836 14.4729 16.9142 14.4536 16.7193 14.5886ZM12.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_arrow_left_24_regular.svg";

Details

Keywords

rectanglechatannouncement