<svg>
	<use xlink:href="#cockade-ribbons" class="red"></use>
	<use xlink:href="#cockade" class="yellow"></use>
	<use xlink:href="#cockade-one" class="red"></use>
</svg>

<svg>
	<use xlink:href="#cockade-ribbons" class="red"></use>
	<use xlink:href="#cockade" class="green"></use>
	<use xlink:href="#cockade-two" class="white"></use>
</svg>

<svg>
	<use xlink:href="#umbrella-handle" class="brown"></use>
	<use xlink:href="#umbrella-top" class="red"></use>
</svg>
<svg>
	<use xlink:href="#umbrella-handle" class="yellow"></use>
	<use xlink:href="#umbrella-top" class="green"></use>
</svg>


<svg xmlns="http://www.w3.org/2000/svg" hidden>
	<symbol id="cockade-two" viewbox="0 0 54 54">
		<title>cockade-two</title>
		<path d="M36.79 30.46H17.58v-3.21a20.22 20.22 0 0 1 2.76-2.33 28.22 28.22 0 0 1 3-1.87q1.65-.87 2.77-1.55a7.33 7.33 0 0 0 1.76-1.43 4.18 4.18 0 0 0 .91-1.51 5.69 5.69 0 0 0 .28-1.83A4.38 4.38 0 0 0 28 13.46a3.9 3.9 0 0 0-2.83-1 6.39 6.39 0 0 0-1 .08 4.88 4.88 0 0 0-1 .29q.27.8.51 1.65a6.79 6.79 0 0 1 .25 1.9 2.46 2.46 0 0 1-.9 2 3.51 3.51 0 0 1-2.3.74 2.72 2.72 0 0 1-2.12-.87 3 3 0 0 1-.79-2.11q0-2.16 2.52-3.74a11.33 11.33 0 0 1 6.13-1.58 13.86 13.86 0 0 1 6.76 1.44 4.9 4.9 0 0 1 2.58 4.63 4.67 4.67 0 0 1-.68 2.66 5.9 5.9 0 0 1-2 1.77 12.46 12.46 0 0 1-2.63 1.13q-1.45.44-3.09.85a28.05 28.05 0 0 0-3.06.94A11 11 0 0 0 22 25.41v.2h14.8z" />
	</symbol>
	<symbol id="cockade-one" viewbox="0 0 54 54">
		<title>cockade-one</title>
		<path d="M33.88 30.46H19.26v-1.35q.53 0 1.69-.18a9.53 9.53 0 0 0 1.59-.28 1.61 1.61 0 0 0 .83-.6 2 2 0 0 0 .3-1.17V15.64h-4.49V14h1a9.36 9.36 0 0 0 2.67-.34 7.32 7.32 0 0 0 1.87-.82 6.48 6.48 0 0 0 1.25-1 9.41 9.41 0 0 0 .77-.94h3.12q-.05 1.15-.11 2.7t-.05 2.76v10.32a2.16 2.16 0 0 0 .3 1.11 1.79 1.79 0 0 0 .79.72 6.54 6.54 0 0 0 1.54.39q1.08.18 1.6.21z" />
	</symbol>
	<symbol id="cockade-ribbons" viewbox="0 0 54 54">
		<title>cockade-ribbons</title>
		<path d="M43.24 49.5L35.86 48l-4.55 6-8.9-23.57 11.93-4.51 8.9 23.58z" />
		<path d="M22.18 49.21l-4.54-6.01-7.38 1.49 8.95-23.56 11.91 4.52-8.94 23.56z" />
	</symbol>
	<symbol id="cockade" viewbox="0 0 54 54">
		<title>cockade</title>
		<path d="M47.7 20.7c0 1.75-2.53 3.14-3 4.75s1 4.14.19 5.6-3.71 1.43-4.89 2.63-1.15 4.09-2.63 4.95-3.93-.64-5.6-.19-3 3-4.75 3-3.14-2.53-4.75-3-4.14 1-5.6.19-1.45-3.74-2.67-4.95-4.09-1.15-4.95-2.63.64-3.93.19-5.6-3-3-3-4.75 2.53-3.14 3-4.75-1-4.14-.19-5.6S12.82 8.92 14 7.72s1.15-4.09 2.63-4.95 3.93.64 5.6.19 3-3 4.75-3 3.14 2.53 4.75 3 4.14-1 5.6-.19S38.78 6.52 40 7.72s4.09 1.15 4.95 2.63-.64 3.93-.19 5.6S47.7 19 47.7 20.7z" />
	</symbol>
	<symbol id="umbrella-handle" viewbox="0 0 54 54">
		<title>umbrella-handle</title>
		<path d="M34.59 54a10.14 10.14 0 0 1-10.12-10.12V22.15a2.53 2.53 0 1 1 5.06 0v21.73a5.06 5.06 0 0 0 10.13 0 2.53 2.53 0 1 1 5.06 0A10.14 10.14 0 0 1 34.59 54z" />
	</symbol>
	<symbol id="umbrella-top" viewbox="0 0 54 54">
		<title>umbrella-top</title>
		<path d="M48.6 23.69c2.79 0 5.07 1.45 5.34 3.31H54a27 27 0 0 0-54 0h.06c.28-2 2.55-3.31 5.34-3.31S10.47 25 10.74 27h.11c.28-1.86 2.55-3.31 5.34-3.31s5.07 1.45 5.34 3.31h.11c.28-1.86 2.55-3.31 5.34-3.31s5.07 1.45 5.34 3.31h.11c.28-1.86 2.55-3.31 5.34-3.31s5.07 1.45 5.34 3.31h.11c.31-1.86 2.59-3.31 5.38-3.31z" />
	</symbol>
</svg>

svg {
	width: 6rem;
	height: 6rem;
	margin: 1rem;
}

.red {
	fill: #c00;
}

.yellow {
	fill: #fc0;
}

.green {
	fill: #32CD32;
}

.white {
	fill: #fff;
}

.brown {
	fill: #8B4513;
}