Cast Multiple icon

Use the Cast Multiple 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 { CastMultiple24Regular, CastMultiple24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CastMultiple24Regular aria-label="Cast Multiple" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_cast_multiple_24_regular.svg" width="24" height="24" alt="Cast Multiple">

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="M8.25 3C6.45507 3 5 4.45507 5 6.25V10.0095C3.32189 10.1371 2 11.5392 2 13.25V17.75C2 19.5449 3.45507 21 5.25 21H10.25C11.9608 21 13.3629 19.6781 13.4905 18H18.75C20.5449 18 22 16.5449 22 14.75V6.25C22 4.45507 20.5449 3 18.75 3H8.25ZM5.25 11.5H7.25C7.66421 11.5 8 11.1642 8 10.75C8 10.3358 7.66421 10 7.25 10H6.5V6.25C6.5 5.2835 7.2835 4.5 8.25 4.5H18.75C19.7165 4.5 20.5 5.2835 20.5 6.25V14.75C20.5 15.7165 19.7165 16.5 18.75 16.5H13.5V15.75C13.5 15.3358 13.1642 15 12.75 15C12.3358 15 12 15.3358 12 15.75V17.75C12 18.7165 11.2165 19.5 10.25 19.5H5.25C4.2835 19.5 3.5 18.7165 3.5 17.75V13.25C3.5 12.2835 4.2835 11.5 5.25 11.5ZM10.5021 13.9996C11.0533 13.9996 11.5001 13.5528 11.5001 13.0017C11.5001 12.4505 11.0533 12.0037 10.5021 12.0037C9.95099 12.0037 9.5042 12.4505 9.5042 13.0017C9.5042 13.5528 9.95099 13.9996 10.5021 13.9996ZM10.25 9.00676C9.83579 9.00676 9.5 9.34255 9.5 9.75676C9.5 10.171 9.83579 10.5068 10.25 10.5068C11.7671 10.5068 12.997 11.7367 12.997 13.2538C12.997 13.668 13.3328 14.0038 13.747 14.0038C14.1612 14.0038 14.497 13.668 14.497 13.2538C14.497 10.9082 12.5956 9.00676 10.25 9.00676ZM10.25 6C9.83579 6 9.5 6.33579 9.5 6.75C9.5 7.16421 9.83579 7.5 10.25 7.5C13.4277 7.5 16.0038 10.0761 16.0038 13.2538C16.0038 13.668 16.3396 14.0038 16.7538 14.0038C17.168 14.0038 17.5038 13.668 17.5038 13.2538C17.5038 9.24764 14.2562 6 10.25 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/cast_multiple_24_regular.svg";

Details

Keywords

connectshare