Logos

Gives you scalable vector brand logos that can be customized with the power of CSS.

How to use

The extra color classes is .img-primary and .img-muted

<svg class="img-svg"> 
    <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#php"></use>
</svg> 
<svg class="img-svg img-2x">  
    <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#angular"></use>
</svg> 
<svg class="img-svg img-3x"> 
    <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#react"></use>
</svg> 
<svg class="img-svg img-4x"> 
    <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#node-js"></use>
</svg>  
<svg class="img-svg img-5x img-primary"> 
    <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#docker"></use>
</svg>  
<svg class="img-svg img-5x img-muted"> 
    <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#prestashop"></use>
</svg>

Form radios image

Add class .check-btn-img on .form-check-inline radio group.

<div class="form-check-inline check-btn-img">
  <input id="id1" class="form-check-input" type="radio" name="name" value="" checked>
  <label class="form-check-label" for="id1">
    <svg class="img-svg img-4x">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#worpdress"></use>
    </svg>  
  </label>
</div> 
<div class="form-check-inline check-btn-img">
  <input id="id2" class="form-check-input" type="radio" name="name" value="">
  <label class="form-check-label" for="id2">
    <svg class="img-svg img-4x">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#prestashop"></use>
    </svg>  
  </label>
</div> 
<div class="form-check-inline check-btn-img">
  <input id="id3" class="form-check-input" type="radio" name="name" value="" disabled>
  <label class="form-check-label" for="id3">
    <svg class="img-svg img-4x">
      <use xlink:href="//design.umbler.com//assets/svg/sprite-logos.svg#moodle"></use>
    </svg>  
  </label>
</div> 

Platforms and templates logos

Choose the {image-name} below.

• angular

• django

• docker

• dot-net

• drupal

• ghost

• go

• heart

• java

• joomla

• laravel

• magento

• mariadb

• media-wiki

• mongodb

• moodle

• mysql

• node-js

• opencart

• php

• postgre-sql

• prestashop

• python

• react

• redis

• ruby

• sql-server

• wordpress

Illustrator tricks

• Take care to use as few points as possible.
• The hexagonal layer must have the id called h, and symbol group called s.
• Width and height of the logo are 75px and 67.5px respectively.
• Fit artboard: Object / artboards / fit to artwork bounds.
• SVG export config: File / export / export as… / save as SVG.