Materialdesign: Google icons not in their repository

[CoDEmanX]

The following is from the MD specs, Family and Recipes are missing in their current GitHub repo:

zzZ icon in Google Clock app is also not available:

Several more are used in Google Fit app for activity types, but there's not even the generic Sports icon it seems (also the screenshot above):

Camera switch icons are different from the ones used in Google Camera:

I would like to add as many as possible of them, but I dunno how to do that without creating them from scratch (is the vector drawable data stored in apk files?). I also wonder what the licence of these unpublished icons is.

[CoDEmanX]

iOS text icon found here: https://photos.google.com/apps

It's an inlined SVG!

Google Fit website does have the sports-related icons, but they are PNGs. The ones we can grab from the APK are way better, but still raster images :(

[Templarian]

Wow, that is a really good idea to add the non documented icons.

Will look into creating these. Thanks for the screenshots.

[Templarian]

https://materialdesignicons.com/icon/apple-ios
https://materialdesignicons.com/icon/baby
https://materialdesignicons.com/icon/tennis

Rasters are "easy" to reproduce since Google uses the same measurements on almost every icon. That volleyball though is a tough one.

[Templarian]

https://materialdesignicons.com/icon/camera-front
https://materialdesignicons.com/icon/camera-front-variant
https://materialdesignicons.com/icon/camera-rear
https://materialdesignicons.com/icon/camera-rear-variant

Few more missing ones.

[Templarian]

I'm going to talk with Google and see if they have the vectors for the sports icons so I don't have to recreate them.

[Templarian]

https://materialdesignicons.com/icon/sleep
https://materialdesignicons.com/icon/sleep-off

[CoDEmanX]

Great work Austin!

https://materialdesignicons.com/icon/sleep isn't by Google actually, in their version the Zs go from top left to bottom right. I did it the other way, because it works better for the off-state.

[CoDEmanX]

Google Fit icons of interest (too many to post here):
https://www.dropbox.com/sh/r3u4nopcxachcqr/AADDqfFxTJ8bpTX-sbDRw8rxa?dl=0

(Dropbox previews aren't that great if there's transparency, download for optimal quality)

Notes:

• ic_weight_gray is basically Google's scale-bathroom. There's another scale (ic_weight_blue), but it can also be interpreted as generic measurement icon.
• ic_trophy_gray and ic_card_trophy are different and alternatives to trophy / trophy-variant
• ic_calories_dark is different from fire
• ic_circuit_training_gray is similar to timer, but it has much more details, it is rounded and has a different hand position.
• ic_distance_white is a map marker in a rotated box, maybe useful
• ic_heartrate_red is different from pulse, but I like pulse better
• ic_reorder_light is 2x3, whereas drag-vertical is 2x5
• ic_sleep_blue is a moon, which seems to be missing from MDI, although there is weather-night
• ic_graph_details_gray seems to be ic_equalizer_24px.svg from their icon repo
• The following are rounded versions of the very similar stock ones: ic_biking_teal / ic_fitness_walking_gray / ic_jogging_gray

Duplicates (add one, use the others for aliases / tagging):

• ic_indoor_skating_gray / ic_inline_skating_gray
• ic_kayaking_gray / ic_paddle_boarding_gray / ic_rowing_gray
• ic_dancing_gray / ic_zumba_gray
• ic_backcountry_skiing_gray / ic_downhill_skiing_gray
• ic_martial_arts_gray / ic_mixed_martial_arts_gray
• ic_open_water_swimming_gray / ic_pool_swimming_gray
• ic_road_biking_gray / ic_biking_teal
• ic_jogging_gray / ic_running_pink (both rounded)
• ic_ergometer_gray / ic_rowing_machine_gray
• ic_australian_football_gray / ic_rugby_gray

---

Google Clock has a sand timer / hourglass different from the one in MDI and Google's own repo:
https://youtu.be/YXjCBN18MWE (3rd icon from left at the top)

Moreover, it's the only half-full / half-empty hourglass. Google repo has full and empty only.

---

More from Google Camera

• ic_capture_pano / ic_pano_blanket

• ic_photosphere

• ic_photosphere_processing
  
  (I believe this is actually from a background, but after all, it's a simplified version of ic_photosphere)

[Templarian]

@CoDEmanX I can't add the Google Fit icons until I get an email back from http://alexlikesdesign.com/google-fit-ui-iconography/

I need to verify the usage rights kept on the icons and if it is possible for them to be open sourced.

[CoDEmanX]

I see. BTW: on Alex's page, there are a couple more icons I obviously missed or weren't in the APK _(added them now with different resolution)_:

Table tennis, team sports, wheelchair, windsurfing, spinning, skateboarding, sledding, snowmobiling, back-country skiing, snowboarding, soccer, stair climbing, surfing, strength training, water polo - man this guy is an :octopus:

[CoDEmanX]

There's an alternative version of the briefcase icon used in Google Maps app. It has no rounded handle:

[ghost]

What about redesigned YouTube player icons? https://www.youtube.com/testtube

They're animated (sic!) and look differently

Youtube vs Repository
vs
vs
vs

It's inlined SVG as well

[CoDEmanX]

They are not fully compliant to the MD specs. They rather look like they looked for a long time, for consistency. YouTube has millions of inexperienced users which could get confused maybe... We can think about an alternate mute icon, but it should be based on the MD speaker icon.

[CoDEmanX]

@Templarian: is transparency supported by TTF / OTF / WOFF? Google's WiFi and battery status icons use different opacities...

Furthermore, the battery icons do not match the ones used in stock android lollipop, the latter have no rounding at the top. What shall we do?

[Templarian]

Their updated icons have no transparency in their 2.0 set. Not all the icons are going to match 1:1 some have slight variations since 2.0 was released.

These are from 1.0, it looks like google deleted all of their battery related icons and only left a few remaining. I think the ones in the community pack are fine.

[CoDEmanX]

Fill color 30% opacity in their repo, latest trunk:
https://github.com/google/material-design-icons/blob/master/device/svg/design/ic_battery_50_24px.svg

[CoDEmanX]

Local ATM icon is different in Google Maps (2nd icon):

vs.

https://www.google.com/design/icons/#ic_local_atm

[CoDEmanX]

Alternative version of light bulb, see https://github.com/Templarian/MaterialDesign/issues/518#issuecomment-123770525:
https://www.dropbox.com/s/7ee1y3mvq8lk1g0/light-bulb.svg?dl=0 (reference image still included)

Works nicely IMO, although it's not fully pixel-aligned and stroke-width is 1.5px. But this is the closest I got to the reference image, assuming they had a 2px margin on all borders.

[CoDEmanX]

Saw a bluetooth-transfer icon on my Nexus 5, stock Android:

https://www.dropbox.com/s/5c8ms5905w6zxdq/bluetooth-transfer.svg?dl=0

[CoDEmanX]

The local atm item doesn't work that well, the "100" is hardly legible and got heavily distorted when I saved it as optimized SVG (3 decimal places). Thus the existing bank note icon is probably preferred.

Below a design-version, with the digits as font letters in white:
https://www.dropbox.com/s/bzwx1jdd5x9egcm/atm.svg?dl=0

[Templarian]

https://materialdesignicons.com/icon/bluetooth-transfer
https://materialdesignicons.com/icon/cash-100

Not really a big fan of the lightbulb variant. The on/off variants do not look as clean as the current ones.

Seeing as I can't get any response on the licensing for the Google Fit icons I can't currently add them.

[CoDEmanX]

Found another in Google Camera: crop and rotate

[CoDEmanX]

Re-creation of crop-rotate:
https://www.dropbox.com/s/ipu3pd72mowurwx/crop-rotate.svg?dl=0

[CoDEmanX]

"important" icon ("fat arrow", "big chevron"?):
https://www.dropbox.com/s/mgffguy7kvhzl5n/important.svg?dl=0

as seen in Gmail app:

3 more icons over here: https://github.com/Templarian/MaterialDesign/issues/420#issuecomment-127570399

[jvanderwee]

Also a few icons from https://www.google.co.uk/design/spec/style/icons.html#icons-system-icons, e.g. full body icons:

[danielhickman]

I found this one in one of Google's repos:
Repo: https://github.com/google/physical-web
AI File (I can convert to SVG if needed): https://github.com/google/physical-web/blob/master/documentation/images/logo/Physical%20Web%20logo.ai

[CoDEmanX]

I tried to re-create the recipe / apple icon, here are the results:
https://www.dropbox.com/s/8utdls3o5z5wpk6/apple2.svg?dl=0
https://www.dropbox.com/s/ikxmp4h5zdpgu70/apple3.svg?dl=0 less points, but no perfect line width on the left half

Re-creations of the human shapes:
https://www.dropbox.com/s/kcem0e21si37bo1/human2.svg?dl=0
https://www.dropbox.com/s/5tkj44p8es5s20l/human-handsdown.svg?dl=0
https://www.dropbox.com/s/hr2zf3p2f4odj6q/human-handsup.svg?dl=0

[CoDEmanX]

MD version of the physical web icon:
https://www.dropbox.com/s/3g369xnb13xtq90/physical-web.svg?dl=0

Android 6 icons:

The battery icon is not pixel-perfect and has no rounding on the top corners in contrast to the repo / MDI battery icons. Should we change the existing icons to use no rounding, add an additional set or ignore this variation?

RAM: The original is not pixel-perfect either. I think my slightly different but pixel-perfect version is better for MDI.
https://www.dropbox.com/s/rjhgrkjsqx8jgfb/ram.svg?dl=0

Do not disturb (off) https://www.dropbox.com/s/cqi7i2jrlqt8a5n/minus-circle-off.svg?dl=0
Cast off https://www.dropbox.com/s/vbn9kww09ynlgn1/cast-off.svg?dl=0

[CoDEmanX]

https://www.dropbox.com/s/itpqtrhy5ridy6v/protected-content.svg?dl=0
https://www.dropbox.com/s/mct4gj6o4wpsjyw/cookie.svg?dl=0

Found in Chrome:

The icon used for the JavaScript entry is very similar to MDI's import icon, so not really needed. The language icon is not very legible at small sizes and there's a superior "translate" icon in the Google repository.

[CoDEmanX]

I tried to re-create a few of the Google Fit icons, but it's pretty difficult. They were designed for 18x18 pixels, and they need to be changed quite a lot to make them pixel-perfect at 20 / 24px. Not sure how to continue...

[CoDEmanX]

Found this on Google Docs and slightly improved the grid alignment:
https://www.dropbox.com/s/f1eqo6cjixlrnv2/upper-lower-case.svg?dl=0

[CoDEmanX]

email-multiple as seen in Gmail app ("all mail"):
https://www.dropbox.com/s/rluoltturxzf06l/email-multiple.design?dl=0

[CoDEmanX]

Discovered on Google Maps website:

Couldn't find them in their repo in a quick search, but I might've overlooked them. If not, shall I re-create them all @Templarian?

//edit: we do have the 4. double arrows ("chevron")!
//edit2: found 3 on Google's page by incident, it's called "verified user"
//edit3: we also have 2, map-marker-circle

1. map-marker-circle
2. send-to-phone https://www.dropbox.com/s/vksk2bz9sq2yppa/send-to-phone.svg?dl=0
3. verified-user
4. chevrons
5. map-marker-box https://www.dropbox.com/s/hilrhyt1mapvzs1/map-marker-box.svg?dl=0

[CoDEmanX]

In Google Clock app:

New round (timer feature)

https://www.dropbox.com/s/m0emaw29xtb1j5p/timer-new-round.svg?dl=0

Reset timer

The latter can be created by simply mirroring https://materialdesignicons.com/icon/reload

[CoDEmanX]

I don't think I've seen this in their repo either:

https://www.dropbox.com/s/64fwvwewp5ifmkx/human_greeting2.svg?dl=0

[CoDEmanX]

There's apparently a tramway icon in Google Maps(?):
https://github.com/google/material-design-icons/issues/271

[rcknr]

@CoDEmanX It is in different style though. All other directions icons show vehicle type from the front.

[CoDEmanX]

Two more from the guidelines:

The star is actually a counter example, but Google uses it in the Play Store app for family games IIRC.

https://www.dropbox.com/s/ttaww368kwsq77u/face.svg?dl=0
https://www.dropbox.com/s/qmuyto0e0r41uwa/star-face.svg?dl=0

[CoDEmanX]

This icon appears in the status bar if you take a screenshot on a stock Android:

It doesn't comply to MD guidelines it seems. A more material-y version could look like this:

https://www.dropbox.com/s/zpoueg8sgwmebz1/screenshot.svg?dl=0

[CoDEmanX]

From Google Photos app:

• [ ] assistant
• [x] story / flick through / book open (yet another variant)
• [x] animation / keyframes
• [x] collage
• [ ] what's new
• [ ] dashboard? / view/layout something?
• [ ] ov-gif (auto-generated mini animations of picture series)

From Google Maps (I think):

• [x] directions
• [x] lead-pencil
• [ ] mobile-devices

Dropbox: https://www.dropbox.com/sh/v7ftlivfq8gc1kx/AAC7oVXF0i4MYYCLgJcJ1rGFa?dl=0

[CoDEmanX]

"collections" icon from Google Plus (SVG is inlined on their page):
https://www.dropbox.com/s/8baq6um8y8qplck/collections.svg?dl=0

[CoDEmanX]

• [ ] Google Docs something, not grid-aligned at all
• [ ] location (near by, Google Maps)
• [ ] Sorted inbox (Gmail)
• [ ] drag handle (Google Keep) / Braille?
• [x] add participant (call conference, Google Phone)
• [ ] select (Keep)
• [x] eraser (Keep)
• [ ] pen (Keep)
• [x] grease pencil (Keep)
• [x] marker pen (Keep)
• [ ] hiker (Google Maps)

Tried to re-create some of them:

[Templarian]

@CoDEmanX Wehre are the SVG's for the ones above (eraser, marker, pens, highlighters etc)?

I really want to get more of the drawing icons in.

[CoDEmanX]

Was actually waiting for 1.5 release, because you said you would start to add many more icons after that, but I can provide them any time of course. I'm not quite happy with the drawing icons though, they feel like they aren't fully material yet. I tried to adhere to the reference icons, but they don't really comply to the MD guidelines. I think they should be slightly smaller...

[Templarian]

Yea, no problem. Yea, no new icons are going in before the 1.5.54 release.

[CoDEmanX]

Found these 3 in the latest official sticker sheet:

(select-?, updates, clipboard)

The clipboard is quite a bit larger than our version.

[anjocerdena]

I'm contributing an icon found in a notification: Android Device Manager.

Android Device Manager.zip

[Templarian]

[CoDEmanX]

The phone-minus icon is actually from the recesses of creativity of mine. Phone-plus is by Google and used in their dialer app to add participants to a call, but no minus button to remove. Seemed like a good addition icon-wise though.

[CoDEmanX]

some more recreations:

Based on @anjocerdena's idea to add the locate device icon, I made one that matches our existing map-marker:

@Templarian: Here's another pack of icons, including above:
https://www.dropbox.com/s/wf4jjxu07pammz7/2016-04-29_Conversion.zip?dl=0

[CoDEmanX]

The keyboard app for Android was updated and has now some sort of display mode for one-handed writing. The icon to activate this mode:

My re-creation doesn't seem very recognizable at 24px² though:

[JamesCoyle]

https://github.com/Templarian/MaterialDesign/issues/505#issuecomment-122299730
Did you ever get the permission to use those?

[TheManuz]

I retraced the hourglass icon of system alarm app, mentioned in @CoDEmanX comment.

Here are the PNGs:

And here is the SVG (zipped):
Hourglass_24px.svg.zip

[gabrielgrant]

@Templarian Did you ever hear back about the Google Fit icons? Looks like the same person/people have more (afaics not-in-repo) icons here: https://lunarsaloon.com/work/google-iconography/

[Templarian]

@gabrielgrant Yea, Google owns all rights to the icons as far as the designer knew. We just need to get them traced and added I assume (was on a week vacation working through backlog of issues, usually quicker at responding). If someone wants to reach out for the source files that might be quicker.

[JapanYoshi]

TIL even Google sometimes breaks their own Guidelines.