Chapter 106: Icons Device
What is Google Device Icons
Let me explain it very slowly, very clearly, and very honestly — like a real teacher who wants you to really understand and never be confused again.
The short & truthful answer first
There is no official icon set called “Google Device Icons” in 2026.
Google does not publish, distribute, or officially name any library as “Google Device Icons”, “Google Devices Icons”, “Google Hardware Icons”, or anything similar.
When people search or ask for “Google Device Icons” (especially in 2025–2026), they are almost always making one of these four common mix-ups / assumptions:
- They mean Material Symbols (Google’s current official icon library) and are looking for icons that represent devices (phone, tablet, laptop, desktop, smartwatch, television, speaker, etc.).
- They saw someone use the phrase “device icons” in a tutorial, blog post, Reddit thread, Figma community file, or design system documentation and thought it was an official Google product name (it isn’t — it’s just a descriptive term).
- They are thinking of icons used inside Google’s own device-related products (Android Settings → Connected devices, Google Home app, Pixel phone UI, Wear OS, Google TV, Nest, Chromebook settings, etc.) — but those icons are not published as a separate “Device Icons” library.
- They are confusing it with one of the many device icon sets that exist in Material Symbols under names like phone_android, tablet_android, laptop, desktop_windows, smartphone, watch, tv, speaker, etc.
Bottom line (write this down):
There is no separate “Google Device Icons” library. The icons you are looking for are part of Material Symbols — Google’s official, free, modern icon system.
2. Where the confusion comes from (quick history – 2 minutes)
In the old Material Icons days (2014–2022):
- Icons were organized in folders/categories with short codes
- Device-related icons were in a category/folder called device or hardware → so you had names like device_phone_android, device_laptop, device_tv, device_watch, etc.
People started calling them “device icons” or “Google device icons” in tutorials and code comments.
Then Google changed everything:
- 2022–2023 → Material Symbols (variable font system) → all category prefixes disappeared → now every icon has a simple, descriptive English name: phone_android, laptop, desktop_windows, tv, watch, speaker, etc.
So in 2026:
- There is no “Device” category anymore
- There is no “Google Device Icons” product
- All the icons people used to call “device icons” are now just normal Material Symbols with normal names
3. The real icons people want when they ask for “Google Device Icons” (2026 list)
These are the most common device-related icons from Material Symbols that developers use to build device selection screens, responsive design previews, connected devices lists, smart home UIs, Android/iOS mockups, etc.
All of them are available in Outlined / Rounded / Sharp styles.
| What you want to show | Current Material Symbols name (2026) | Looks like (description) | Very common real-world usage in 2026 |
|---|---|---|---|
| Android phone / smartphone | phone_android | Modern Android phone | Mobile app preview, device selector |
| iPhone / generic smartphone | smartphone | Generic smartphone | iOS / cross-platform mockup |
| Tablet / iPad | tablet_android | Android tablet | Tablet view / responsive design |
| Laptop / notebook | laptop | Open laptop | Laptop preview, desktop app |
| Desktop computer / monitor | desktop_windows | Desktop PC / monitor | Desktop website preview |
| Smartwatch / Wear OS | watch | Round smartwatch | Wear OS app, fitness tracker |
| Television / smart TV | tv | Television screen | Google TV, Chromecast, smart TV app |
| Speaker / smart speaker | speaker | Speaker with sound waves | Google Nest, Bluetooth speaker |
| Headphones / earbuds | headphones | Over-ear headphones | Audio device, music player |
| Headset / with microphone | headset_mic | Headset with mic | Video call, support headset |
| Keyboard | keyboard | Computer keyboard | Input device, typing settings |
| Mouse / pointer | mouse | Computer mouse | Pointing device |
| Router / wifi router | router | Wifi router with antennas | Network device, home wifi |
| Phone / generic call device | phone_iphone | iPhone style phone | Phone call, contact |
| Devices (generic multiple) | devices | Phone + tablet + laptop | Connected devices screen |
4. Real, copy-paste examples (how people actually use these icons in 2026)
Example 1: Connected devices screen (very common in Android Settings / Google Home style)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> <div style="max-width:500px; margin:60px auto; padding:20px; border:1px solid #dadce0; border-radius:12px;"> <h2 style="margin:0 0 20px; font-size:1.6rem;">Connected devices</h2> <div style="display:flex; align-items:center; gap:16px; padding:16px; border-bottom:1px solid #eee;"> <span class="material-symbols-outlined" style="font-size:32px; color:#1a73e8;">phone_android</span> <div> <strong>Pixel 9 Pro</strong><br> <small>Android 16 • Connected now</small> </div> </div> <div style="display:flex; align-items:center; gap:16px; padding:16px; border-bottom:1px solid #eee;"> <span class="material-symbols-outlined" style="font-size:32px; color:#1a73e8;">watch</span> <div> <strong>Pixel Watch 3</strong><br> <small>Charging • 78% battery</small> </div> </div> <div style="display:flex; align-items:center; gap:16px; padding:16px;"> <span class="material-symbols-outlined" style="font-size:32px; color:#1a73e8;">tv</span> <div> <strong>Living Room TV</strong><br> <small>Chromecast built-in • Last used 2h ago</small> </div> </div> </div> |
Example 2: Device preview / responsive design switcher
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div style="display:flex; justify-content:center; gap:40px; font-size:4rem; margin:60px 0;"> <div style="text-align:center; cursor:pointer;"> <span class="material-symbols-outlined" style="font-size:64px; color:#1a73e8;">phone_android</span> <p style="font-size:1.3rem; margin-top:10px;">Mobile</p> </div> <div style="text-align:center; cursor:pointer;"> <span class="material-symbols-outlined" style="font-size:64px; color:#1a73e8;">tablet_android</span> <p style="font-size:1.3rem; margin-top:10px;">Tablet</p> </div> <div style="text-align:center; cursor:pointer;"> <span class="material-symbols-outlined" style="font-size:64px; color:#1a73e8;">desktop_windows</span> <p style="font-size:1.3rem; margin-top:10px;">Desktop</p> </div> </div> |
Example 3: “Add new device” button
|
0 1 2 3 4 5 6 7 8 9 |
<button style="background:#1a73e8; color:white; padding:16px 32px; border:none; border-radius:50px; font-size:1.2rem; cursor:pointer; display:flex; align-items:center; gap:12px;"> <span class="material-symbols-outlined" style="font-size:28px;">add</span> Add new device </button> |
Teacher Summary – Quick Truth Table (March 2026)
| Question | Honest Answer (2026) |
|---|---|
| Is there an official library called “Google Device Icons”? | No |
| Is there a special “Device” category inside Google icons? | No (used to exist in old Material Icons naming) |
| Where do the phone/tablet/laptop/watch/tv icons come from? | Material Symbols (Google’s current official icon library) |
| Current best icon names for devices? | phone_android, smartphone, tablet_android, laptop, desktop_windows, watch, tv, speaker, headphones, devices |
| Best way to use them in 2026? | Material Symbols via Google Fonts CDN (variable font) |
| Number of device-related icons available? | ~40–60 (plenty for any device UI, smart home, or responsive preview) |
Final Teacher Advice
If you want Google-style device icons (phone, tablet, laptop, desktop, smartwatch, TV, speaker, headphones, etc.) in 2026:
→ Use Material Symbols → Take icons named: phone_android, tablet_android, laptop, desktop_windows, watch, tv, speaker, headphones, devices, etc. → Use blue (#1a73e8) for active/connected devices and gray (#757575) for inactive ones to match real Google apps look
Got it now? Want me to:
- Build a full connected devices screen or responsive preview switcher demo using only Material Symbols?
- Show side-by-side comparison of Material Symbols vs Font Awesome 5 device icons?
- Give you ready-to-copy Material Symbols CDN code + several device UI examples?
- Or go back to the Font Awesome 5 categories?
Just raise your hand — teacher is ready! 📱💻⌚📺🎧🚀
