We’re excited to announce the release of the popularly requested Custom Icons feature!
When you start using custom icons, be sure to refresh the browser on your other devices to pull in the latest ‘app’ changes so custom icons work there too! Otherwise you might end up with missing tiles on devices that haven’t been refreshed.
This closes out the Custom User Icons feature request!
As part of this release, you’ll find a brand new Files tab in the Manage Resources section of your User Page. You can either drag files from your desktop onto the page or tap the upload button at the bottom of the screen to upload an image.
When you edit a tile and go to select an icon, you’ll see a new tab interface that enables you to switch between the normal System icons and your own Media Library.
For convenience, you can also upload images from this view. By default, tapping an uploaded media item will select it for use in your tile. You can also tap the Enable Edit Mode link in the bottom right corner to enable the multi-selection and ability to view/delete items. Just make sure to switch back out of edit mode if you want to select an icon.
Custom CSS User? (Tap to expand)
Note that if you are using Custom CSS and are targeting the icon/svg elements in the following tile types, you may have to update your CSS. With the introduction of Custom Icons, we also standardized some of the html/classes so icons are more consistent across all tiles.
I’ve used shorthand CSS declarations to describe the changes along with a descriptive note, but if you need more details on anything, feel free to ask.
- Hyperlink Tile, Rule Tile
.main-content.icon > svg
.main-content > .icon > .svg
.iconis now a separate sub-element of the
- Number Variable Tile, String Variable Tile, Hero Attribute, Temperature Sensor
.data > svg.data-icon.icon
.data > div.data-icon.icon > svg
svgis now a sub-element of
- Color Control (with Circle Background)
.icon > .icon-circle-holder > .icon-circle, .icon > svg
.icon-circle-holder > .icon-circle, .icon > svg
.icon-circle-holderis now a sibling of the
.iconso the inner content of
Check out the related help article for more details and Frequently Asked Questions: