Custom Icons

Instead bitmaps, SVG image sprites is the best way to optimise the delivery of your images.

How to use

Always set size’s classes, like .img-5x. Use 100% for a responsive image.

  
<svg class="img-svg {img-2x|img-3x|img-4x|img-5x}">  
    <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#{image-name}"></use>
</svg> 

Logo inverse

Add class .img-logo-inverse or .img-inverse-primary in logo and favicon svg.

  
<svg class="img-svg img-logo-inverse" style="width:150px;height:41px">  
    <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umbler-logo"></use>
</svg> 
<svg class="img-svg img-4x img-logo-inverse">  
    <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umbler-favicon"></use>
</svg>  
<svg class="img-svg img-4x img-inverse-primary">  
    <use xlink:href="//design.umbler.com//assets/svg/sprite-umbler.svg#img-umbler-favicon"></use>
</svg>  

Sprite umbler pack

Choose the {image-name} below.

  • img-u-webapps

  • img-u-mail

  • img-u-domain

  • img-u-addons

  • img-u-database

  • img-app-domain

  • img-app-email

  • img-app-site

  • img-u-webapps

  • img-u-domain

  • img-u-mail

  • img-u-database

  • img-app-payment

  • img-umbler-heart

  • img-umbler-logo

  • img-umbler-favicon

  • img-umblercoin-gold

  • img-umblercoin-silver

  • img-deploy-ftps

  • img-deploy-github

  • img-deploy-git-ssh

  • img-deploy-git-remote

  • img-deploy-goodbyehost

  • img-deploy-upload

  • img-auto-recharge

  • img-app-recharge

  • img-app-help

  • img-account

  • img-account-new

  • img-refer-friend

  • img-credit-card

  • img-credit-card-verse

  • img-site-new

  • img-email-new

  • img-email-new-contact

  • img-exchange

  • img-email-csv

  • img-email-csv-contact

  • img-new-writer

  • img-tag-feedback

  • img-logo-amex

  • img-logo-diners

  • img-logo-discover

  • img-logo-elo

  • img-logo-mastercard

  • img-logo-paypal

  • img-logo-paypal-symbol

  • img-logo-visa

IE9 Fallback

SVG for Everybody adds SVG External Content support to all browsers.

 
<!--[if IE 9]>
<script src="https://cdn.jsdelivr.net/svg4everybody/2.1.3/svg4everybody.min.js"></script>
<script>svg4everybody();</script>
<![endif]-->