Custom Icons

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

How to use

Use svg image link in <img>. Always set size’s classes, like .img-5x.

 
<!-- recommended svg image link -->
<img src="//design.umbler.com//assets/svg/sprite-umbler/{image-name}.svg" class="img-svg img-[2x|3x|4x|5x] {img-colors}" /> 

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

Change colors

You can change {img-colors} using these classes: .img-[primary|primary-light|accent|accent-light|muted]

Sprite Umbler pack

Choose the {image-name} below.

• img-u-webapps

• img-u-mail

• img-u-domain

• img-u-addons

• img-u-database

• img-umblercoin-gold

• img-umblercoin-silver

• img-umbler-heart

• img-umbler-logo

• img-umbler-favicon

• img-umbler-logo-i

• img-umbler-favicon-i

• img-logo-cloudflare

• img-logo-newrelic

• img-logo-letsencrypt

• img-app-help

• img-app-domain

• img-app-email

• img-app-site

• img-app-payment

• 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-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]-->