Original icon colors are kept until you pick a new color.
Device Pattern - Vector and 3D Icons
Source, author, and license are available in the preview and icon details. Device Pattern - Free for commercial use. License shown on every icon.. No Sign-Up Required | 100% Browser-Based Processing
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" width="36" height="36" fill="currentColor" role="img" aria-label="Device Pattern icon"><title>Device Pattern - Material Icons icon</title><desc>Free Device Pattern vector icon from the Material Icons open-source icon library; scalable W3C SVG 2.0 graphic for web and design use.</desc><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M4,6c0-1.1,0.9-2,2-2s2,0.9,2,2S7.1,8,6,8S4,7.1,4,6z M6,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S4.9,14,6,14z M12,8 c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S10.9,8,12,8z M18,10c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S19.1,10,18,10z M17.98,16 c-0.74,0-1.37,0.4-1.72,1h-2.54c-0.34-0.6-0.98-1-1.72-1s-1.37,0.4-1.72,1H8.41l3.07-3.07C11.65,13.97,11.82,14,12,14 c1.1,0,2-0.9,2-2c0-0.18-0.03-0.35-0.07-0.51l3.56-3.56C17.65,7.97,17.82,8,18,8c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2 c0,0.18,0.03,0.35,0.07,0.51l-3.56,3.56C12.35,10.03,12.18,10,12,10c-1.1,0-2,0.9-2,2c0,0.18,0.03,0.35,0.07,0.51l-3.56,3.56 C6.35,16.03,6.18,16,6,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c0.74,0,1.37-0.4,1.72-1h2.57c0.34,0.6,0.98,1,1.72,1s1.37-0.4,1.72-1h2.55 c0.34,0.6,0.98,1,1.72,1c1.1,0,2-0.9,2-2C19.98,16.9,19.08,16,17.98,16z"/></g></g></svg>
Want to Improve or Restyle This Icon? Device Pattern
Generate a precise engineering prompt, or improve the icon on the canvas right now. Device Pattern
Library: Material Icons | Author: Google LLC | License: Apache-2.0 | No Sign-Up Required | 100% Browser-Based Processing
Device Pattern - Technical Vector Specifications
Source, author, and license are available in the preview and icon details. Device Pattern
| Canonical asset identifier | material/material-sharp-device-device-pattern |
|---|---|
| Source library pack | Material Icons |
| Coordinate grid and viewBox | viewBox="0 0 24 24" |
| Uncompressed payload | 1,237 bytes (~680 bytes gzipped) |
| SPDX license and commercial use | Apache-2.0 - Free for commercial use |
| Supported export targets | SVG, PNG (32px-2048px), WebP, ICO, React TSX, Vue 3, Svelte, Tailwind CSS, CSS Mask, Base64 |
| Security and privacy guarantee | No Sign-Up Required | 100% Browser-Based Processing |
How to Use and Customize This Icon: Device Pattern
- Customize visually: Color, Auto (Stroke and Fill), Stroke Width (
0.5px-4px), Live Vector Animation Presets - Download vector or raster: Download SVG, PNG (Transparent), WebP (Optimized) (
2048x2048 px) - Copy framework code: Copy ready code for React, Next.js, Vue 3, Svelte, Angular, HTML, and CSS masks.
- Deep vector editing: Edit in SVG Editor (76,166)
material-sharp-device-device-pattern.svg aria-hidden="true" focusable="false"
More in User Interface (UI/UX)
BrowseFilled Social Social Thumb Down Alt
Material Icons|interfaceDuotone Flashlight Duotone
Phosphor Icons|interfaceOutline Businessplan
Tabler Icons|interfaceShield
IconPark|interfaceFilled Social Social Thumb Up Alt
Material Icons|interfaceDuotone Flask Duotone
Phosphor Icons|interfaceOutline Butterfly
Tabler Icons|interfaceShip
IconPark|interfaceFilled Social Social Thunderstorm
Material Icons|interfaceDuotone Flip Horizontal Duotone
Phosphor Icons|interfaceOutline Cactus Off
Tabler Icons|interfaceExplore more
Device Pattern - Frequently Asked Questions
Is the Device Pattern SVG icon free for commercial use? +
Yes. The Device Pattern icon from the Material Icons collection is licensed under Apache-2.0. You can use it free of charge in commercial websites, mobile apps, SaaS products, and print designs.
Does the Device Pattern icon keep its original default colors on download? +
Yes. By default, downloading Device Pattern keeps its original SVG colors and stroke settings untouched. If you pick a custom color or stroke width in the live editor, your downloaded file will include your custom changes.
How do I use the Device Pattern icon in React, Next.js, or Vue? +
Switch to the React TSX or Vue 3 tab on this page and click Copy SVG. Paste the component into your project and style it with standard CSS or Tailwind classes.
Can I download Device Pattern as a transparent PNG image? +
Yes. Choose your preferred size such as 64px, 128px, 256px, 512px, or 2048px and click Download PNG to render a high-resolution transparent PNG in your browser.
How do I animate the Device Pattern SVG icon with CSS? +
Click any animation button in the Live Editor such as Spin, Pulse, Bounce, Float, or Draw. The SVG code and download automatically include the matching CSS keyframes.
Can I generate an AI prompt for Device Pattern? +
Yes. Use the AI Icon Prompt Generator section on this page to create a tailored prompt for Device Pattern in 3D Clay, Glassmorphism, Neon, or Minimalist Vector style.
Can I resize the Device Pattern icon without losing quality? +
Yes. The Device Pattern file is a vector with a scalable viewBox, so it stays sharp at 16px, 64px, 512px, or any print size.
Where do I report a problem with the Device Pattern icon file? +
Write to support@svgnexus.com with the icon URL. License and takedown questions about Device Pattern go to legal@svgnexus.com.
SVG Editor
Edit paths, layers, colors, and animations in your browser, then export clean SVG, PNG, or framework code.