Logos

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

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/logos/{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-logos.svg#{image-name}"></use>
</svg>

Change colors

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

Templates logos

Choose the {image-name} below.

  • angular

  • bolt

  • cockpit

  • django

  • docker

  • dot-net

  • drupal

  • elementor

  • gatsby

  • grav

  • ghost

  • go

  • heart

  • java

  • joomla

  • laravel

  • magento

  • mariadb

  • media-wiki

  • mongodb

  • moodle

  • mysql

  • netlify

  • node-js

  • october

  • opencart

  • php

  • postgre-sql

  • prestashop

  • python

  • react

  • redis

  • ruby

  • sql-server

  • strapi

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