How do you center an SVG icon within 'itself'?

Here’s my site you can see the 3x icons need to be centered. I’ve added some padding but they’re still not centered.

Is it a case of individually adding margin/padding to them?

*I say within ‘itself’ as I just changed the height/width and added some background color to match the finished challenge.


original SVG 
<svg xmlns="" width="24" height="20"><path fill="#697ED4" d="M21.6 2.4H12L9.6 0H2.4A2.39 2.39 0 00.012 2.4L0 16.8a2.4 2.4 0 002.4 2.4h19.2a2.4 2.4 0 002.4-2.4v-12a2.4 2.4 0 00-2.4-2.4z"/></svg>

If you mean that the three icons should be centered in relation to the .folder-card div then I suggest you concentrate on the .folder-card_bottom_row div.


In the pic above you can see the folder/document/upload icons centered within the dark navy background. I’ve moved the icons to the top left so you can see. I want them to be centered within their squares

You can’t do this with CSS, you’d have to edit the SVG element, particularly the viewBox attribute. That attribute defines the coordinate system for the <path> (a rectangle that goes from upper left to lower right). The bigger the rectangle, the smaller the path. The general syntax is:

viewBox="start-x start-y end-x end-y"

This would be an example how to center the folder icon:

<svg xmlns="" viewBox="-8 -5 37 35" width="45" height="45">

You can play with the values until you get the result you want for each icon.

1 Like

This is great, thank you! Works perfectly.

I usually just convert SVG’s to PNG as never understood them but this definitely makes things a lot easier.