Tetris App icon
Used in Teams to represent a to do app. The Tetris App 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 Tetris App 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 { TetrisApp24Regular, TetrisApp24Filled } from "@fluentui/react-icons";
export function Example() {
return <TetrisApp24Regular aria-label="Tetris App" />;
}Use it in HTML
Reference the SVG file directly:
<img src="https://fluenticons.co/icons/ic_fluent_tetris_app_24_regular.svg" width="24" height="24" alt="Tetris App"> 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.75027 2C7.78376 2 7.00026 2.7835 7.00026 3.75V6.74998C7.00026 6.88806 6.88833 6.99998 6.75026 6.99998H3.75001C2.78351 6.99998 2 7.78349 2 8.74998V11.75C2 12.7165 2.78351 13.5 3.75001 13.5H11.7501C12.7166 13.5 13.5001 12.7165 13.5001 11.75V8.75C13.5001 8.61193 13.612 8.5 13.7501 8.5H16.2503C17.2168 8.5 18.0003 7.7165 18.0003 6.75V3.75C18.0003 2.7835 17.2168 2 16.2503 2H8.75027ZM16.2503 7H13.5001V3.5H16.2503C16.3884 3.5 16.5003 3.61193 16.5003 3.75V6.75C16.5003 6.88807 16.3884 7 16.2503 7ZM12.0001 7H8.48254C8.49422 6.91834 8.50027 6.83487 8.50027 6.74998V3.75C8.50027 3.61193 8.61219 3.5 8.75027 3.5H12.0001V7ZM7.00003 8.5V12H3.75001C3.61194 12 3.50001 11.8881 3.50001 11.75V8.74998C3.50001 8.61191 3.61194 8.49998 3.75001 8.49998L7.00003 8.5ZM8.50004 8.5H12.0178C12.0061 8.58165 12.0001 8.66512 12.0001 8.75V11.75C12.0001 11.8881 11.8881 12 11.7501 12H8.50004V8.5ZM17.2497 10.5C16.2832 10.5 15.4997 11.2835 15.4997 12.25V15.25C15.4997 15.3881 15.3878 15.5 15.2497 15.5H6.74978C5.78328 15.5 4.99977 16.2835 4.99977 17.25V20.25C4.99977 21.2165 5.78328 22 6.74978 22H20.25C21.2165 22 22 21.2165 22 20.25V12.25C22 11.2835 21.2165 10.5 20.25 10.5H17.2497ZM16.9997 12.25C16.9997 12.112 17.1117 12 17.2497 12H20.25C20.3881 12 20.5 12.112 20.5 12.25V15.5H16.982C16.9937 15.4184 16.9997 15.3349 16.9997 15.25V12.25ZM17.0001 17H20.5V20.25C20.5 20.3881 20.3881 20.5 20.25 20.5H17.0001V17ZM15.5001 16.9822V20.5H11.5001V17H15.2497C15.3347 17 15.4183 16.994 15.5001 16.9822ZM10 17V20.5H6.74978C6.61171 20.5 6.49978 20.3881 6.49978 20.25V17.25C6.49978 17.1119 6.61171 17 6.74978 17H10Z" 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/tetris_app_24_regular.svg";Details
| Name | Tetris App |
|---|---|
| Styles | Regular (outlined), Filled |
| Size | 24 × 24 px (scalable SVG) |
| Regular (outlined) file | ic_fluent_tetris_app_24_regular.svg |
| Filled file | ic_fluent_tetris_app_24_filled.svg |
| React components | TetrisApp24Regular, TetrisApp24Filled |
| License | MIT (© Microsoft Corporation) |