Logos

The Master logo is our most important and valuable identity element. It’s the mark of assurance that appears on almost everything we do.

Orange
Master logo
Orange
Small logo

Responsive SVG


Boosted uses —and recommends to use— a single SVG file for both logos, since it’s lightweight and easily made responsive. Here is the unminified SVG content:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
	<defs>
		<style>
			@media(max-width:49.98px) {
				#b {
					display: none;
				}
			}
			@media(min-width:50px) {
				#c {
					display: none;
				}
			}
		</style>
	</defs>
	<path fill="#ff7900" d="M0 0h50v50H0z"/>
	<path fill="#fff" id="c" d="M7 35h35v7H7z"/>
	<path fill="#fff" id="b" stroke-width=".18" d="M19.61 45.16a4.1 4.1 0 01-2.29.69c-1.3 0-2.06-.87-2.06-2.02 0-1.56 1.43-2.39 4.38-2.72v-.39c0-.5-.39-.8-1.1-.8a2.07 2.07 0 00-1.69.8l-1.23-.7q.97-1.36 2.96-1.36c1.82 0 2.83.78 2.83 2.06v5.05h-1.63zm-2.56-1.47c0 .47.3.9.82.9.58 0 1.14-.23 1.7-.73v-1.64c-1.71.21-2.52.65-2.52 1.48zm5.8-4.7l1.51-.2.17.82c.86-.63 1.54-.96 2.4-.96 1.42 0 2.16.76 2.16 2.27v4.84h-1.83v-4.52c0-.86-.22-1.24-.88-1.24-.55 0-1.1.25-1.71.77v5h-1.82zm18.37 6.9c-2.05 0-3.27-1.31-3.27-3.6 0-2.3 1.23-3.64 3.24-3.64 2.01 0 3.2 1.28 3.2 3.54l-.01.36h-4.64c.02 1.31.57 1.98 1.64 1.98.7 0 1.15-.28 1.58-.88l1.34.74c-.59.99-1.65 1.5-3.08 1.5zm1.37-4.52c0-.93-.53-1.48-1.4-1.48-.82 0-1.34.53-1.41 1.48zm-36.44 4.6c-1.8 0-3.44-1.15-3.44-3.67s1.63-3.67 3.44-3.67c1.82 0 3.45 1.16 3.45 3.67 0 2.52-1.64 3.67-3.45 3.67zm0-5.8c-1.36 0-1.62 1.24-1.62 2.12 0 .88.26 2.13 1.62 2.13 1.37 0 1.63-1.24 1.63-2.13 0-.9-.26-2.12-1.63-2.12zm4.7-1.36h1.74v.81a2.7 2.7 0 011.92-.96 1.52 1.52 0 01.24.02v1.71h-.09c-.8 0-1.67.13-1.94.75v4.62h-1.87zm22.72 5.46c1.4 0 1.51-1.42 1.51-2.34 0-1.09-.53-1.98-1.52-1.98-.66 0-1.39.48-1.39 2.05 0 .86.06 2.28 1.4 2.27zm3.27-5.48v6.58c0 1.17-.09 3.08-3.4 3.1-1.37 0-2.64-.54-2.9-1.73l1.81-.3c.08.35.29.7 1.31.7.95 0 1.41-.46 1.41-1.55v-.81l-.02-.03c-.3.52-.73 1.02-1.8 1.02-1.62 0-2.9-1.13-2.9-3.48 0-2.33 1.32-3.63 2.8-3.63 1.39 0 1.9.63 2.02.96h-.02l.15-.83zm8.27-2.31h-.72v1.99h-.38v-2h-.72v-.3h1.82zm3 1.99h-.38v-1.92h-.01l-.75 1.92h-.24l-.76-1.92v1.92h-.39v-2.3h.59l.68 1.75.68-1.74h.58z"/>
</svg>

Download(SVG, 1.79ko)

Orange Business
Services
OBS logo left-aligned with white descriptor
Orange Business
Services
OBS logo left-aligned with black descriptor
Orange Business
Services
OBS logo left-aligned with white descriptor
Orange Business
Services
OBS logo left-aligned with black descriptor

Using semantic markup


Boosted flex and spacing utilities allows to use semantic markup to implement Orange Business Services' logo.

<div class="d-inline-flex align-items-baseline">
  <img id="obs" src="orange-logo.svg" width="50" height="50" alt="" aria-hidden="true" loading="lazy">
  <span class="h5 ms-2 mb-0 align-self-end">
    <span class="visually-hidden">Orange </span>
    Business<br>Services
  </span>
</div>

A single CSS property is required for proper alignment:

#obs {
  margin-bottom: $spacer / 10;
}