# Perspective - Icon\\Image in Multi-state button **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [September 19, 2023, 1:31pm UTC](https://forum.inductiveautomation.com/t/perspective-icon-image-in-multi-state-button/79338 "2023-09-19T13:31:49Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![Peleg\_Lider](https://avatars.discourse-cdn.com/v4/letter/p/90db22/32.png) [@Peleg\_Lider](https://forum.inductiveautomation.com/u/Peleg_Lider)\ **Post date:** [September 19, 2023, 1:31pm UTC](https://forum.inductiveautomation.com/t/perspective-icon-image-in-multi-state-button/79338/1 "2023-09-19T13:31:49Z")
Hello everyone. I've been trying recently to create a view with a multi-state button with icons instead of text, as shown here: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/9/d983f14e7e7d9daf9a5f55f8ac6f70f197661a8c.png) But I can't seem to find any way of inserting an icon, as is possible with the 'image' property of a regular button. Is there perhaps a way around this or another option\method for multi-state buttons? Thanks in advance 🙂 ---
**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\ **Post date:** [September 19, 2023, 4:47pm UTC](https://forum.inductiveautomation.com/t/perspective-icon-image-in-multi-state-button/79338/2 "2023-09-19T16:47:32Z")
Try using background images: `states.0.selectedStyle.backgroundImage : url("/system/images/path-to-image.svg")` and do the same for `states.0.unselectedStyle. ...` Repeat for each button option. Use Tools | Image Management to upload the icons. If I was to use your application I'd surely appreciate tooltips on your icons. I have no idea what they might mean. The problem is that there is only one tooltip for the whole multistate. ---
**Author:** ![Ali\_Ali](https://avatars.discourse-cdn.com/v4/letter/a/bbe5ce/32.png) [@Ali\_Ali](https://forum.inductiveautomation.com/u/Ali_Ali)\ **Post date:** [September 4, 2024, 12:21pm UTC](https://forum.inductiveautomation.com/t/perspective-icon-image-in-multi-state-button/79338/3 "2024-09-04T12:21:26Z")
Thank you for your advice. FYI now there is tooltip for each state in the multistate button. Do you think there may be any other method other than background-image? I need to put an icon next to the text. I think it can also be done with background-image, but I was just hoping for simpler solution. ---
**Author:** ![Steve\_Laubach](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/steve_laubach/32/60900_2.png) [@Steve\_Laubach](https://forum.inductiveautomation.com/u/Steve_Laubach)\ **Post date:** [September 4, 2024, 12:40pm UTC](https://forum.inductiveautomation.com/t/perspective-icon-image-in-multi-state-button/79338/4 "2024-09-04T12:40:22Z")
Transistor's option is a good one. Another way to do it is to convert the SVG to CSS (assuming your icon is an SVG) and embed it in a style in the advanced style sheet and using a map transform to select which style to apply. If you haven't used advanced style sheet before; it's important to understand that your style needs to have a 'psc-' prefix in the style sheet and you don't include that part when you're using the style. So if your style is defined as 'psc-test' in the advanced style sheet you would add 'test' to the "classes" property in perspective. There's a real useful website that converts SVGs to embedded CSS. You'll also want to look into various CSS properties that dictate how an SVG renders in your style. There's a ton of interesting options. > **[SVG to CSS converter](https://www.svgbackgrounds.com/tools/svg-to-css/)** > > 👉 Copy and paste SVG code and convert it into a Data URI, which can be used as a background image in pure CSS. Best of all no image files required.