# QML Plugin SVG-Icons pixelated when using data uri

**URL:** <https://community.qfield.org/t/qml-plugin-svg-icons-pixelated-when-using-data-uri/1892>\
**Category:** Ask the Community\
**Created:** [7 September 2026 11:36 UTC](https://community.qfield.org/t/qml-plugin-svg-icons-pixelated-when-using-data-uri/1892 "2026-09-07T11:36:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![calidris](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@calidris](https://community.qfield.org/u/calidris)\
**Post date:** [7 September 2026 11:36 UTC](https://community.qfield.org/t/qml-plugin-svg-icons-pixelated-when-using-data-uri/1892/1 "2026-09-07T11:36:27Z")

</div>

Hi,

I’m currently writing a little project plugin for QFIELD that creates a toolbar button with an SVG icon using the following code:

```auto
QfToolButton {
  id: updateButton
  bgcolor: Theme.darkGraySemiOpaque
  width: 40
  height: 40
  padding: 0
  round: true
  iconSource: "update.svg"
}

```

This works perfectly fine, but to avoid a separate SVG file for the icon in the project folder, I’m trying to embedd the SVG via data source uri directly into the plugin code :

```auto
QfToolButton {
  id: updateButton
  bgcolor: Theme.darkGraySemiOpaque
  width: 40
  height: 40
  padding: 0
  round: true
  iconSource: 'data:image/svg+xml;utf8,<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="update" class="icon glyph"><path d="M5,12A7,7,0,0,1,16.89,7H14a1,1,0,0,0,0,2h5.08A1,1,0,0,0,20,8V3a1,1,0,0,0-2,0V5.32A9,9,0,0,0,3,12a1,1,0,0,0,2,0Z"></path><path d="M20,11a1,1,0,0,0-1,1A7,7,0,0,1,7.11,17H10a1,1,0,0,0,0-2H4.92A1,1,0,0,0,4,16v5a1,1,0,0,0,2,0V18.68A9,9,0,0,0,21,12,1,1,0,0,0,20,11Z"></path></svg>'
}

```

This works as intended, however the SVG icon appears pixelated and blurry. What am I doing wrong or do I have to set some sort of scaling factor to it? When I use a web uri of the same icon ([svgrepo.com/show/460134/update.svg](https://www.svgrepo.com/show/460134/update.svg)), it is rendered nicely. But as I want this to be offline useable, this is not an option.

---

<div class="post-metadata">

**Author:** ![cuprico](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@cuprico](https://community.qfield.org/u/cuprico)\
**Post date:** [7 September 2026 12:09 UTC](https://community.qfield.org/t/qml-plugin-svg-icons-pixelated-when-using-data-uri/1892/2 "2026-09-07T12:09:12Z")

</div>

hello @calidris , just a guess, but have you tried with a bigger SVG? That is, instead of enlarging the box to 800px on which you extend the SVG, to try and make the lines occupy 800px in the first place.

Here I’ve attached the icon rescaled to 800px if you want to try:

 ![update-big](https://europe1.discourse-cdn.com/flex018/uploads/qfield/original/2X/b/b904a89b9286e80e575514b676dc44c5cf8bfd01.svg)

---

<div class="post-metadata">

**Author:** ![fggs-pascal](https://dub1.discourse-cdn.com/flex018/user_avatar/community.qfield.org/fggs-pascal/32/732_2.png) [@fggs-pascal](https://community.qfield.org/u/fggs-pascal)\
**Post date:** [7 September 2026 12:14 UTC](https://community.qfield.org/t/qml-plugin-svg-icons-pixelated-when-using-data-uri/1892/3 "2026-09-07T12:14:56Z")

</div>

Heya!

I have no experience directly embedding SVG data into the Plugin source code itself, but for icons that resemble those already used by QField, you can just use QField’s own icons instead:

```auto
iconSource: Theme.getThemeVectorIcon("ic_rotate_white_24dp")
iconColor: "white"

```

The icons available this way can be found here (minus the .svg file extension): [QField/images/themes/qfield/nodpi at master · opengisch/QField · GitHub](https://github.com/opengisch/QField/tree/master/images/themes/qfield/nodpi)

---

<div class="post-metadata">

**Author:** ![calidris](https://avatars.discourse-cdn.com/v4/letter/c/58f4c7/32.png) [@calidris](https://community.qfield.org/u/calidris)\
**Post date:** [7 September 2026 12:51 UTC](https://community.qfield.org/t/qml-plugin-svg-icons-pixelated-when-using-data-uri/1892/4 "2026-09-07T12:51:21Z")

</div>

Thanks @cuprico . But unfortunately it didn’t change anything. I tried it before with bigger icons and again with your enlarged SVG, but no difference.