Cast icon
Used in screen casting to other devices. The Cast 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 Cast 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 { Cast24Regular, Cast24Filled } from "@fluentui/react-icons";
export function Example() {
return <Cast24Regular aria-label="Cast" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_cast_24_regular.svg" width="24" height="24" alt="Cast"> 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="M2 6.25C2 5.00736 3.00736 4 4.25 4H19.75C20.9926 4 22 5.00736 22 6.25V17.75C22 18.9926 20.9926 20 19.75 20H4.25C3.00736 20 2 18.9926 2 17.75V6.25ZM4.25 5.5C3.83579 5.5 3.5 5.83579 3.5 6.25V17.75C3.5 18.1642 3.83579 18.5 4.25 18.5H19.75C20.1642 18.5 20.5 18.1642 20.5 17.75V6.25C20.5 5.83579 20.1642 5.5 19.75 5.5H4.25ZM6.9959 15.9955C6.9959 16.5466 6.5491 16.9934 5.99795 16.9934C5.4468 16.9934 5 16.5466 5 15.9955C5 15.4443 5.4468 14.9975 5.99795 14.9975C6.5491 14.9975 6.9959 15.4443 6.9959 15.9955ZM4.9958 12.7506C4.9958 12.3363 5.33159 12.0006 5.7458 12.0006C8.09138 12.0006 9.99284 13.902 9.99284 16.2476C9.99284 16.6618 9.65705 16.9976 9.24284 16.9976C8.82863 16.9976 8.49284 16.6618 8.49284 16.2476C8.49284 14.7304 7.26295 13.5006 5.7458 13.5006C5.33159 13.5006 4.9958 13.1648 4.9958 12.7506ZM4.9958 9.74379C4.9958 9.32958 5.33159 8.99379 5.7458 8.99379C9.75197 8.99379 12.9996 12.2414 12.9996 16.2476C12.9996 16.6618 12.6638 16.9976 12.2496 16.9976C11.8354 16.9976 11.4996 16.6618 11.4996 16.2476C11.4996 13.0699 8.92354 10.4938 5.7458 10.4938C5.33159 10.4938 4.9958 10.158 4.9958 9.74379Z" 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_24_regular.svg";Details
| Name | Cast |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_cast_24_regular.svg |
| Filled file | ic_fluent_cast_24_filled.svg |
| React components | Cast24Regular, Cast24Filled |
| License | MIT (© Microsoft Corporation) |