SVG Sprite Demo | Orion Icon Library

SVG Icons Sprite generated by Orion Icon Library

## Let's use your SVG Sprite!

Congratulations, your SVG Sprite from Autopilots Collection from Orion Icon Library was created successfully!
In the downloaded folder, you will find the file called `orion-svg-sprite.svg` which contains your SVG Sprite [Open]. Please find below different techniques on how to use your Icons in your Web Project.

### ‹a› Inline SVG Sprite

The first technique consists in including the content of the `orion-svg-sprite.svg` in your `HTML` like in the example below:

    <body>
      <svg width="0" height="0" class="hidden" style="display:none">
        <symbol id="myIcon-1">
          <path d="..."></path>
          <path d="..." stroke="..."></path>
        </symbol>
        <symbol id="myIcon-2">
          <circle rx="..."></circle>
          <path d="..."></path>
        </symbol>
        <symbol>...</symbol>
      </svg>
      <section>Here we will call the Icons references to show them!</section>
    </body>

Then you can call whenever you want any of the SVG Icons from the sprite, referencing them with the `<use>` element, like:

    <body>
      <svg width="0" height="0" class="hidden" style="display:none">The SVG Sprite</svg>
      <section>
        <svg>
          <use xlink:href="#myIcon-1"></use>
        </svg>
        <svg>
          <use xlink:href="#myIcon-2"></use>
        </svg>
      </section>
    </body>

Pros: Easy to implement, cross-browser support, unique HTTP request.
Cons: Adds extra markup in the HTML document, SVG Sprite cannot be cached.
Tips: Put the SVG Sprite markup before calling them ( bugin Safari).

### ‹b› SVG Sprite in an external file

The second technique consists in referencing the Icons from the SVG sprite as an external file. This allows to display different parts of the SVG Sprite by specifying the fragment identifier at the end of the URL.

In the `HTML` markup you include your Icons using `<use>` to reference the `orion-svg-sprite.svg` file with the specific `#fragment` ID of each Icon you need. Below an example:

    <body>
      <section>
        <svg>
          <use xlink:href="orion-svg-sprite.svg#myIcon-1"></use>
        </svg>
        <svg>
          <use xlink:href="orion-svg-sprite.svg#myIcon-2"></use>
        </svg>
      </section>
    </body>

Pros: Less cluttered markup. External file is cachable, which helps with page load speed.
Cons: The browser support is good except for older Internet Explorer versions (IE<9).
Tips: In case you need to support IE older versions, you can use the great svg4everybody plugin.

### ➜ Icons Reference

Use one of the techniques described before to call the SVG Sprite.
Then select the Icons you need below to easily copy the `<use>` reference and paste it in your Project.

Hint Select the technique you want to use with the switch button.
The use code reference will update with the correct url below the icons

Plus You can set a specific size for your Icons instances.
This is useful if you need a fixed size and will not style with `css`.
Ok, I want to specify the size

- #close-1

      <svg class="theme-line-0"><use xlink:href="#close-1"></use></svg>

- #checkmark-1

      <svg class="theme-line-0"><use xlink:href="#checkmark-1"></use></svg>

- #rotate-left-1

      <svg class="theme-line-2"><use xlink:href="#rotate-left-1"></use></svg>

- #portfolio-grid-1

      <svg class="theme-line-2"><use xlink:href="#portfolio-grid-1"></use></svg>

- #more-1

      <svg class="theme-line-4"><use xlink:href="#more-1"></use></svg>

- #speed-1

      <svg class="theme-line-2"><use xlink:href="#speed-1"></use></svg>

- #security-shield-1

      <svg class="theme-line-2"><use xlink:href="#security-shield-1"></use></svg>

- #food-1

      <svg class="theme-line-2"><use xlink:href="#food-1"></use></svg>

- #hot-coffee-1

      <svg class="theme-line-2"><use xlink:href="#hot-coffee-1"></use></svg>

- #tea-cup-1

      <svg class="theme-line-2"><use xlink:href="#tea-cup-1"></use></svg>

- #muffin-1

      <svg class="theme-line-2"><use xlink:href="#muffin-1"></use></svg>

- #man-1

      <svg class="theme-line-2"><use xlink:href="#man-1"></use></svg>

- #woman-1

      <svg class="theme-line-2"><use xlink:href="#woman-1"></use></svg>

- #user-1

      <svg class="theme-line-0"><use xlink:href="#user-1"></use></svg>

- #quality-1

      <svg class="theme-line-2"><use xlink:href="#quality-1"></use></svg>

- #reading-1

      <svg class="theme-line-15"><use xlink:href="#reading-1"></use></svg>

- #news-1

      <svg class="theme-line-15"><use xlink:href="#news-1"></use></svg>

- #sun-1

      <svg class="theme-line-2"><use xlink:href="#sun-1"></use></svg>

- #camera-1

      <svg class="theme-line-2"><use xlink:href="#camera-1"></use></svg>

- #retro-camera-1

      <svg class="theme-line-2"><use xlink:href="#retro-camera-1"></use></svg>

- #play-button-1

      <svg class="theme-line-2"><use xlink:href="#play-button-1"></use></svg>

- #tv-1

      <svg class="theme-line-2"><use xlink:href="#tv-1"></use></svg>

- #time-1

      <svg class="theme-line-2"><use xlink:href="#time-1"></use></svg>

- #deadline-1

      <svg class="theme-line-2"><use xlink:href="#deadline-1"></use></svg>

- #heartbeat-1

      <svg class="theme-line-2"><use xlink:href="#heartbeat-1"></use></svg>

- #first-aid-kit-1

      <svg class="theme-line-2"><use xlink:href="#first-aid-kit-1"></use></svg>

- #hospital-1

      <svg class="theme-line-2"><use xlink:href="#hospital-1"></use></svg>

- #map-pin-1

      <svg class="theme-line-0"><use xlink:href="#map-pin-1"></use></svg>

- #pin-1

      <svg class="theme-line-2"><use xlink:href="#pin-1"></use></svg>

- #map-marker-1

      <svg class="theme-line-2"><use xlink:href="#map-marker-1"></use></svg>

- #cart-1

      <svg class="theme-line-2"><use xlink:href="#cart-1"></use></svg>

- #shopping-cart-1

      <svg class="theme-line-2"><use xlink:href="#shopping-cart-1"></use></svg>

- #paper-bag-1

      <svg class="theme-line-2"><use xlink:href="#paper-bag-1"></use></svg>

- #retail-bag-1

      <svg class="theme-line-2"><use xlink:href="#retail-bag-1"></use></svg>

- #dollar-sign-1

      <svg class="theme-line-2"><use xlink:href="#dollar-sign-1"></use></svg>

- #dollar-badge-1

      <svg class="theme-line-35"><use xlink:href="#dollar-badge-1"></use></svg>

- #credit-card-1

      <svg class="theme-line-2"><use xlink:href="#credit-card-1"></use></svg>

- #pay-by-card-1

      <svg class="theme-line-15"><use xlink:href="#pay-by-card-1"></use></svg>

- #bank-cards-1

      <svg class="theme-line-2"><use xlink:href="#bank-cards-1"></use></svg>

- #money-box-1

      <svg class="theme-line-15"><use xlink:href="#money-box-1"></use></svg>

- #pay-1

      <svg class="theme-line-15"><use xlink:href="#pay-1"></use></svg>

- #delivery-truck-1

      <svg class="theme-line-15"><use xlink:href="#delivery-truck-1"></use></svg>

- #delivery-time-1

      <svg class="theme-line-2"><use xlink:href="#delivery-time-1"></use></svg>

- #giftbox-1

      <svg class="theme-line-2"><use xlink:href="#giftbox-1"></use></svg>

- #tag-1

      <svg class="theme-line-2"><use xlink:href="#tag-1"></use></svg>

- #pie-chart-1

      <svg class="theme-line-15"><use xlink:href="#pie-chart-1"></use></svg>

- #sedan-1

      <svg class="theme-line-2"><use xlink:href="#sedan-1"></use></svg>

- #document-saved-1

      <svg class="theme-line-2"><use xlink:href="#document-saved-1"></use></svg>

- #calls-1

      <svg class="theme-line-0"><use xlink:href="#calls-1"></use></svg>

- #speaker-call-1

      <svg class="theme-line-2"><use xlink:href="#speaker-call-1"></use></svg>

- #landline-1

      <svg class="theme-line-2"><use xlink:href="#landline-1"></use></svg>

- #smartphone-1

      <svg class="theme-line-2"><use xlink:href="#smartphone-1"></use></svg>

- #chats-1

      <svg class="theme-line-2"><use xlink:href="#chats-1"></use></svg>

- #24h-assistance-1

      <svg class="theme-line-15"><use xlink:href="#24h-assistance-1"></use></svg>

- #share-1

      <svg class="theme-line-2"><use xlink:href="#share-1"></use></svg>

- #envelope-1

      <svg class="theme-line-2"><use xlink:href="#envelope-1"></use></svg>

- #paper-plane-1

      <svg class="theme-line-2"><use xlink:href="#paper-plane-1"></use></svg>

- #chat-bubble-1

      <svg class="theme-line-2"><use xlink:href="#chat-bubble-1"></use></svg>

- #mental-illness-1

      <svg class="theme-line-2"><use xlink:href="#mental-illness-1"></use></svg>

- #mental-health-1

      <svg class="theme-line-2"><use xlink:href="#mental-health-1"></use></svg>

- #arrow-target-1

      <svg class="theme-line-2"><use xlink:href="#arrow-target-1"></use></svg>

- #target-1

      <svg class="theme-line-2"><use xlink:href="#target-1"></use></svg>

- #sales-up-1

      <svg class="theme-line-15"><use xlink:href="#sales-up-1"></use></svg>

- #statistic-1

      <svg class="theme-line-2"><use xlink:href="#statistic-1"></use></svg>

- #numbers-1

      <svg class="theme-line-2"><use xlink:href="#numbers-1"></use></svg>

- #stream-video-1

      <svg class="theme-line-2"><use xlink:href="#stream-video-1"></use></svg>

- #play-video-1

      <svg class="theme-line-15"><use xlink:href="#play-video-1"></use></svg>

- #movie-camera-1

      <svg class="theme-line-2"><use xlink:href="#movie-camera-1"></use></svg>

- #real-estate-1

      <svg class="theme-line-15"><use xlink:href="#real-estate-1"></use></svg>

- #property-1

      <svg class="theme-line-2"><use xlink:href="#property-1"></use></svg>

- #page-1

      <svg class="theme-line-15"><use xlink:href="#page-1"></use></svg>

- #list-details-1

      <svg class="theme-line-15"><use xlink:href="#list-details-1"></use></svg>

- #sorting-1

      <svg class="theme-line-2"><use xlink:href="#sorting-1"></use></svg>

### ❧ CSS Styles and Variables

You selected the options to generate the SVG Sprite with external color `css`classes.
That means that Orion detected if your icons had different color layers and created a class and stylesheet for you to edit the icons color properties.
Try me! The color classes below are editable. Make your changes in real time and paste it directly into your project.

Support: Since our Icons can have several Layers, this technique take advantage of the CSS Custom Properties.
This has a good browser support except for older IE versions. In those browsers the original color will be used as a fallback.

### ⊙ Useful links

You can find a lot of information on the Internet about `SVG`.
We made a little selection for you if you want to learn more.

- Styling SVG <use> Content with CSS, by Sara Soueidan
- Customizable SVG Icons with CSS Variables by Amelia Bellamy-Royds
- A Complete Guide to SVG Fallbacks by Amelia Bellamy-Royds
- A Compendium of SVG Information by Chris Coyier
- The Pocket Guide to Writing SVG by Joni Trythall
- Inline SVG vs Icon Fonts [CAGEMATCH] by Chris Coyier
- Understanding SVG Coordinate Systems and Transformations, the whole serie by Sara Soueidan