Where are the tile icons?

I don’t know if this is the library @david.mccrindle was referring to, but I see that the original list from @Dianoga has been updated. It’s still missing some icons (e.g., the ones from the Keen vent DTH), but it’s a great start. Thank you Brian and Kevin!

1 Like

A set of signal/battery strength indicators (for WiFi RSSI): e.g., a set of icons that can be used to show strength rather than having to look at a numeric value:

2 Likes

How about including an icon for aquarium lights, pump (air & water), filter and heater.

Will it be possible to add a background as you can do in tiles but in Smartapps?

Example:

input (image: “st.motion.motion.active”, name: “switch”, type: “capability.switch”, title: “Turn On Switche(s):”, description: “select switche(s) to turn On”, defaultValue: null, multiple: true, required: false)

Let say i wanted to add the following background color:

backgroundColor:"#53a7c0"
to
"st.motion.motion.active"

thank you for your help!

@david.mccrindle any word on an updated icon library/list. We shouldn’t have to rely on this archived version as the most complete source I’ve found: https://web.archive.org/web/20150825232647/http://scripts.3dgo.net/smartthings/icons

2 Likes

Thank you for posting that url, I wasn’t aware of that list and it’s the most complete that I’ve seen.

I used that page to generate a new multi-column list that displays the icon along with the url and the name for DH tiles.

http://htmlpreview.github.com/?https://github.com/krlaframboise/Resources/blob/master/SmartThings-Icons.html

5 Likes

I would still love to see the UK pocket socket icon that they use on the smartthings website…

2 Likes

Very cool, thanks @krlaframboise!

I did something for myself locally (saved page and jQuery magic :slight_smile: ) and was a bit afraid to share because it had web.archive copyright notices all over the HTML. While I was happy to keep it locally, I wanted to share that page and your permanent link is going to be more useful than anything else we have. Nice work on the HTMLPreview — I had no idea GitHub offered a web server in essence. Wish it could host PHP code for me :slight_smile:

http://htmlpreview.github.com/?https://github.com/krlaframboise/Resources/blob/master/SmartThings-Icons.html

2 Likes

This particular one as its UK?

I want all icons exposed to be honest … Like in the link of the previous post

Yes. Im in the UK and only have the US socket icon to pick from.

Same here - but it doesnt look that different to the US outlet does it … Unlike the one you showed which is an oval and not squared

I wish this link would be useful, kinda disappointing that it’s not and mostly due to the fact that it’s incomplete… Why we can’t get Samsung/ST to own their own resources is pretty sad: http://cdn.device-icons.smartthings.com

I built something similar to yours @krlaframboise for my own reasons due to triple click then copy on the icon name. I wish GitHub would not cache content on rawgit.com but they do so it doesn’t exactly reflect the current version but I’m sure it will in a few hours like it did earlier today after modifications. Looks like rawgit and htmlpreview on GitHub don’t support JavaScript’s existence in the HTML file — kinda makes sense due to security/virus reasons — but sure would have been nice to use GitHub a bit more like a web-server. Gotta love something for nothing :slight_smile: here’s my attempt at the complete icon list: https://cdn.rawgit.com/JZ-SmartThings/SmartThings/master/Icons/ST-Icons.html

3 Likes

Is it possible to change the color of the smartthings icons or can only the background be changed without designing a new icon in the color I’d like?

Here is the code I have currently.

/* hue light */
.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content :        url(http://cdn.device-icons.smartthings.com/lights/philips/hue-single@2x.png);position:relative;right:65px; color : #2C3937;}
.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {content : url(http://cdn.device-icons.smartthings.com/lights/philips/hue-single@2x.png);position:relative;right:65px;  ; color : LIME;}

Yes it’s possible, but not through SmartThings or css. You need to use an application like PhotoShop or Gimp to edit the image. You might even be able to do it using the bucketfill feature in paint.

Then you need to upload the photos to a location they’re accessible to everyone. I think most people upload them to their GitHub account.

Examples:

For the example you posted, you would need to create an image for each color and then reference the corresponding image in the css rule instead of trying to apply a color to it.

Thanks a ton! I just tested with paint and github and it works however mspaint doesn’t do the greatest job so I’m going to test out gimp.

Thanks so much, Kevin!

Feel free to use any of the icons I’ve already modified/created, they can be found here.

Another site that has completely free images that have no license restrictions is http://www.pixabay.com. The first row of the search results are watermarked and can’t be used for free, but all of the other images on the site can be.

2 Likes

Has anyone found open&closed door icons that match the simple styling of the SmartThings garage doors above in this thread? A basic door would be great, a sliding door and a “front door” with side windows even better!

Thanks!

What about different fan speeds (without text). Also agree the door open/closed and window open/closed.

2 Likes

Hi All,

i already asked this question but maybe it was not clear enough:

Is that possible to change the background color in a Smartapp when using image?

Example:

paragraph (image: “st.motion.motion.active” BACKGROUND COLOR, title: “SWITCHES AND DIMMERS”, “Control switches and dimmers.”)

Thank you!

1 Like

No, but you can create your own image with a background color and display different images based on the state of an attribute like motion.

1 Like