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.