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

HTML-CSS
4

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="http://www.w3.org/2000/svg" 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