# Virtual device: SVG requirements

**URL:** https://community.homey.app/t/virtual-device-svg-requirements/47414
**Category:** Questions & Help
**Created:** [May 14, 2021, 8:42pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414 "2021-05-14T20:42:10Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![Joost\_Else](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/joost_else/32/17360_2.png) [@Joost\_Else](https://community.homey.app/u/Joost_Else)
#### Post date: [May 14, 2021, 8:42pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/1 "2021-05-14T20:42:10Z")

</div>

I’m trying to create a virtual device that implements a modus. I want the device to show a lock on its button in the dashboards. For this, apparently you can add an SVG during the creation of the device.

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/0/6086a340b430f21dc3ecb179fbc2afe282587058.png)  
(Note: the one in this screenshot did not work…)

I tried the SVG’s from [GitHub - athombv/homey-vectors-public: Developers can request vector icons for an Homey App here](https://github.com/athombv/homey-vectors-public) and these work, but when I try to create one myself or download a free lock.svg, they don’t show up in the button.

So, what are the requirements for an SVG icon?

---

<div class="post-metadata">

### Author: ![Jero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jero/32/17556_2.png) [@Jero](https://community.homey.app/u/Jero)
#### Post date: [May 14, 2021, 9:06pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/2 "2021-05-14T21:06:54Z")

</div>

This might be a bug in the web app. Have you tried viewing the icons on mobile?

---

<div class="post-metadata">

### Author: ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)
#### Post date: [May 14, 2021, 10:06pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/4 "2021-05-14T22:06:29Z")

</div>

I first tried online .svg icons, some 10% were ok. Until I discovered the Athom icon base, and I’m happy with that 😉 Maybe you can drop the icon creator a note?

---

<div class="post-metadata">

### Author: ![Joost\_Else](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/joost_else/32/17360_2.png) [@Joost\_Else](https://community.homey.app/u/Joost_Else)
#### Post date: [May 15, 2021, 10:04am UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/5 "2021-05-15T10:04:13Z")

</div>

> [@Jero](#):
>
> Have you tried viewing the icons on mobile?

Yeah, tried them in web, dashboard and mobile. Doesn’t make a difference.

> [@Peter\_Kawa](#):
>
> Maybe you can drop the icon creator a note?

I might as well try that yeah, but I would really like to know what the requirements are. It’s a bit stupid these aren’t documented.

---

<div class="post-metadata">

### Author: ![JPe4619](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jpe4619/32/9017_2.png) [@JPe4619](https://community.homey.app/u/JPe4619)
#### Post date: [May 15, 2021, 10:56am UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/6 "2021-05-15T10:56:47Z")

</div>

> **[Guidelines](https://apps.developer.homey.app/app-store/guidelines#1-5-icons)**
>
> Before publishing your app your should read the Homey App Store guidelines to avoid getting your app submission rejected.

Resolutions for the app image:

- Small 250 x 175

- Large 500 x 350

- XLarge 1000 x 700

Resolutions for the driver images:

- Small 75 x 75

- Large 500 x 500

- XLarge 1000 x 1000

---

<div class="post-metadata">

### Author: ![Jero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jero/32/17556_2.png) [@Jero](https://community.homey.app/u/Jero)
#### Post date: [May 15, 2021, 11:02am UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/7 "2021-05-15T11:02:27Z")

</div>

I can 100% confirm you will never see the uploaded icon on the web app without having viewed the device first on mobile. Why these icons from the GitHub link work is because these are official icons that have already been used before. This means they are already available on the Athom CDN.

---

<div class="post-metadata">

### Author: ![Peter\_Kawa](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/peter_kawa/32/173848_2.png) [@Peter\_Kawa](https://community.homey.app/u/Peter_Kawa)
#### Post date: [May 15, 2021, 4:15pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/8 "2021-05-15T16:15:50Z")

</div>

I’m not sure what you mean to say, Jero, but this works on web app. I did nothing on my mobile app with this.

 ![svg-file](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/5/2/52f23d0cceb16cfce3ba2be24debfbf133983eca.png)

![svg-on-vd-tile](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/b/d/bdd877b941175e0bef7010d50645eca113675aa0.png)

---

<div class="post-metadata">

### Author: ![Jero](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/jero/32/17556_2.png) [@Jero](https://community.homey.app/u/Jero)
#### Post date: [May 15, 2021, 4:29pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/9 "2021-05-15T16:29:03Z")

</div>

Then that icon is already known to the CDN.

---

<div class="post-metadata">

### Author: ![Adrian\_Rockall](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/adrian_rockall/32/13209_2.png) [@Adrian\_Rockall](https://community.homey.app/u/Adrian_Rockall)
#### Post date: [May 15, 2021, 6:57pm UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/10 "2021-05-15T18:57:42Z")

</div>

> [@Joost\_Else](#):
>
> So, what are the requirements for an SVG icon

The only requirement I know of is they have to be black and white (no grey).

I can also confirm that @Jero is correct, they will need to be viewed in the mobile app before the web app will display them. The web app requires a jpg that is generated by the mobile app.

---

<div class="post-metadata">

### Author: ![Joost\_Else](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/joost_else/32/17360_2.png) [@Joost\_Else](https://community.homey.app/u/Joost_Else)
#### Post date: [May 16, 2021, 11:53am UTC](https://community.homey.app/t/virtual-device-svg-requirements/47414/11 "2021-05-16T11:53:26Z")

</div>

Thanks, that piece of information was missing from @Jero 's remark. I tried the mobile app on once or twice, didn’t work (probably due to non B/W SVG), than didn’t bother with the mobile app anymore. It works now - I’ve got my SVG visible in the button. Thanks!
