Skip to main content

Every time I’m trying to export an SVG, usually for icon purposes, the file preview, or when viewing in for example browsers, shows a huge white area with a small SVG in the top-left corner. These vectors still more or less work when used in code, but it doesn’t look good. When I look at professionally made icons their previews show just the icon in a large size, with no annoying whitespace. How to achieve this? I’ve attached images to show what I mean, there’s a clear difference when previewing something I’ve created and a Fontawesome icon.




Hi @Juhani, Thanks for reaching out about this!


From what I’ve seen, when I export a 24 x 24 pixel layer, the exported SVG appears small in the top left corner of the screen when opened in a browser, just like in the first screenshot you provided.

Also, the larger the layer size in Figma, the bigger the exported image will display in a browser, but still have some white space.


Unfortunately, I haven’t found a method yet to prevent the surrounding white space from showing up after export. If anyone in our community knows a workaround or has some tips, please don’t hesitate to share them here!


Thanks for reaching out!