Centering an SVG icon

I'm having trouble making icons look clean in Squarespace. The pngs I've uploaded are getting compressed in ways that make them look poor quality. So I'm trying to use SVG icons instead. I opened my SVG icon in a text editor, copy and pasted it into a code block in Squarespace and added width and height properties to size it. However, for the life of me I can't figure out how to center the icon. Screenshots attached of where I'm stuck and the code I'm currently using. Feel like I'm really close. 

Does anyone have a solution for this one?

Many thanks!
Chris

Can you share link to your site?

or try wrapping all code in div tag

<div class="tuan">
  paste all svg code here
</div>

then insert the following code to Home > Design > Custom CSS

.tuan {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

You are a genius! 

I don't have a pricing plan that allows full customization of css but I was able to wrap it in a div and apply your instructions directly inline. 

That works perfectly, thank you @tuanphan🙂

yes. You can use CSS inline <div style="text-align:center;margin-left:auto;margin-right:auto">all svg code</div>

or 

<div class="tuan">svg code</div>

<style>

my css code

</style>

I am having a similar issue. The svg is slightly offset on the right for every icon I used on that page: https://ideam.squarespace.com/projects/meredith-mccrindle (see image attached)

I used a code block with:

<div class="blog-icons">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#D4AF37;}
</style>
<path class="st0" d="M46.5,5h-29L-0.3,27.1L32,59.4l32.3-32.3L46.5,5z M17.4,28l12.2,26.2L3.4,28H17.4z M19.6,28H31v24.5L19.6,28z
     M33,28h11.4L33,52.5V28z M46.6,28h13.9L34.4,54.2L46.6,28z M60.9,26H46.8L41.3,7h4.2L60.9,26z M39.2,7l5.4,19H33V7H39.2z M31,26
    H19.3l5.4-19H31V26z M18.5,7h4.2l-5.4,19H3.1L18.5,7z"/>
</svg>
</div>

And the following custom CSS:

.blog-icons {
  max-width: 30px;
  padding-top: 0px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  }

I am using these icons on the About page too and they are properly centered there. Any idea what's happening?

Thanks in advance!

10 hours ago, Chloe24 said:

I am having a similar issue. The svg is slightly offset on the right for every icon I used on that page: https://ideam.squarespace.com/projects/meredith-mccrindle (see image attached)

I used a code block with:

<div class="blog-icons">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 64 64" style="enable-background:new 0 0 64 64;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#D4AF37;}
</style>
<path class="st0" d="M46.5,5h-29L-0.3,27.1L32,59.4l32.3-32.3L46.5,5z M17.4,28l12.2,26.2L3.4,28H17.4z M19.6,28H31v24.5L19.6,28z
     M33,28h11.4L33,52.5V28z M46.6,28h13.9L34.4,54.2L46.6,28z M60.9,26H46.8L41.3,7h4.2L60.9,26z M39.2,7l5.4,19H33V7H39.2z M31,26
    H19.3l5.4-19H31V26z M18.5,7h4.2l-5.4,19H3.1L18.5,7z"/>
</svg>
</div>

And the following custom CSS:

.blog-icons {
  max-width: 30px;
  padding-top: 0px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  }

I am using these icons on the About page too and they are properly centered there. Any idea what's happening?

Thanks in advance!

Add to Design > custom CSS

/* align center svg icons */
.code-block {
    padding-left: 0 !important;
}

Hello, I seem to be struggling with a similar issue.

On this page, all the icons are good apart from the "accessories" one.

https://www.cooliconlighting.com/faq

I've tried the previous answers, but it is not doing anything. What is wrong with this specific icon?

On 4/7/2022 at 7:34 PM, ChloeCL said:

Hello, I seem to be struggling with a similar issue.

On this page, all the icons are good apart from the "accessories" one.

https://www.cooliconlighting.com/faq

I've tried the previous answers, but it is not doing anything. What is wrong with this specific icon?

It looks like problem came from svg icon. Where/How did you get these icons code?

On 4/10/2022 at 2:24 PM, tuanphan said:

It looks like problem came from svg icon. Where/How did you get these icons code?

I drew it on Illustrator and exported the file as an SVG, then copied the SVG code for it. I've done the same for all the other icons of the website and didn't have any issues with them, so not sure why it's happening to this particular one

On 4/19/2022 at 4:09 PM, ChloeCL said:

I drew it on Illustrator and exported the file as an SVG, then copied the SVG code for it. I've done the same for all the other icons of the website and didn't have any issues with them, so not sure why it's happening to this particular one

The icon itself was not center. Maybe due to some option when you edit the svg? I don't use the software so not sure what setup that is.