How to set size of SVG image in :before pseudo-class?

Sometimes we don't want to use background images for some reasons. I had the same problem you had, and no matter the width and height of the SVG it would not take effect. The reason for this was that the SVG lacked a viewBox.

I just added viewBox='0 0 16 16' in the of the content and violá!

Scale transform worked for me:

::before {
    content: url(path/to/image.svg); // source image is 24px wide
    transform: scale(0.5);           // will be rendered 12px wide
  }

You can use svg as background-image:

.withimage:before {
  content: "";
  display:block;
  height:125px;
  width:125px;
  background-size: 125px 125px;
  background-image: url(test.svg);
  background-repeat: no-repeat;
}

Here is example

Also you can try use this one:

.withimage:before {
  content: url("data:image/svg+xml; utf8, <svg.. code here</svg>");
    display:block;
    height:20px;
    width:20px;
}