The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Can SVG sprites work in CSS?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #266080

    I’ve used SVG sprites for about a year now, along with the svg4everyone plugin for better browser support. I’ve always just used the SVG’s in HTML like this:

    <p><svg class="icon icon--phone"><use xlink:href="img/sprite/sprite.svg#icon-phone"></use></svg> Telephone number here</p>

    It got me wondering, is it possible to use the same SVG sprite in a CSS file? I’ve gave it a shot but I’ve not got it working. I wondered if anyone else has any better luck or if it is possible at all?

    The icons in my SVG file are just formatted like this:

    <svg xmlns="">
            <symbol id="icon-phone" viewBox="0 0 20 20">
                <path d="M11.229,11.229c-1.583,1.582-3.417,3.096-4.142,2.371c-1.037-1.037-1.677-1.941-3.965-0.102
                c-1.005-1.006-2.225-2.762-4.063-0.475c-1.839,2.287-0.936,2.927,0.103,3.965C14.324,7.812,12.811,9.646,11.229,11.229z" />

    Could you elaborate on what you mean by “using it in a CSS file”?

    As far as I understand what you’re after, you could only use it externally as an image. Specific ids inside the SVG markup aren’t accessible that way.


    Sorry, basically how you would normally set a background-image in a CSS file. Like this…

    .item {
        background-color: black;
        background-image: url(...img/sprite/sprite.svg#icon-phone);
        background-repeat: no-repeat;
        background-size: 20px;

    Yeah I don’t think it’s possible either but I just thought I’d ask as it’d save me having duplicated images! :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.