Svg Icon displayed only half size - html

Question

So I have a navbar that uses svg icons. I tried to replace an icon but I can't seem to find the right size/shape.
This is the svg code from the icon that works:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="62px"
viewBox="0 0 32 62" enable-background="new 0 0 32 62" xml:space="preserve">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#FFFFFF" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
This is how the navbar looks, if it helps:
I'm not sure about the size, maybe that's why I get it wrong, however, I tried with 32x32p and 64x64p. Thanks, any answer is welcome
Here is a .css snippet of my navbar icons: https://pastebin.com/7TqJU6yc. Here is my .js code for the animation, if it has anything to do with it: pastebin.com/jCcvEuA4 and lastly a little bit of HTML, however it doesn't really involve the icons much: pastebin.com/RydBqfHB. A little bit of backstory: The icon is set as a <li> background. That's why I thought the size myght be the issue here, or the icon itself, however it doesn't seem the case.
Also, here is a little screenshot with a replaced icon, to help understand the problem: imgur.com/a/LW7sdIZ (notice the home icon)

Answer 1

For clarity, the regulation of the location of the icon relative to the SVG canvas, you can apply the style
style="border:1px solid red;"
The red frame around the icons is the canvas svg
To make the icons visible, I added fill="black"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="62px"
viewBox="0 0 32 62" style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>
If you want to show only one icon, you must specify width="32" height="32" viewBox="0 0 32 32"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32" style="border:1px solid red;">
<title>icon-2</title>
<desc>Created with Sketch.</desc>
<path id="Shape" sketch:type="MSShapeGroup" fill="black" d="M31,30H1c-0.6,0-1-0.4-1-1V6c0-0.6,0.4-1,1-1h9.1C10.6,2.2,13,0,16,0
s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,29.6,31.6,30,31,30L31,30z M16,2c-1.9,0-3.4,1.3-3.9,3h7.7C19.4,3.3,17.9,2,16,2L16,2z
M30,7H2v6h28V7L30,7z M14.3,15c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,15z M30,15H19.9c-0.4,1.7-2,3-3.9,3
s-3.4-1.3-3.9-3H2v13h28V15L30,15z"/>
<path id="Shape_1_" sketch:type="MSShapeGroup" fill="#black" d="M31,62H1c-0.6,0-1-0.4-1-1V38c0-0.6,0.4-1,1-1h9.1
c0.5-2.8,2.9-5,5.9-5s5.4,2.2,5.9,5H31c0.6,0,1,0.4,1,1v23C32,61.6,31.6,62,31,62L31,62z M16,34c-1.9,0-3.4,1.3-3.9,3h7.7
C19.4,35.3,17.9,34,16,34L16,34z M30,39H2v6h28V39L30,39z M14.3,47c0.3,0.6,1,1,1.7,1c0.7,0,1.4-0.4,1.7-1H14.3L14.3,47z M30,47
H19.9c-0.4,1.7-2,3-3.9,3s-3.4-1.3-3.9-3H2v13h28V47L30,47z"/>
</svg>