Hola! Soy novato y estoy haciendo una web con html/css. ¿Cómo podría hacer esto?
[img]http://imgur.com/a/Vds4H[/img]

<nav>
<svg id="circle" height="40px" width="40">
<circle cx="20" cy="20" r="20"/></svg>
<svg id="cross" width="40px" height="40px" viewBox="136 162 279 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M290,287 L290,176.509944 C290,168.485845 283.508129,162 275.5,162 C267.49011,162 261,168.496323 261,176.509944 L261,287 L150.509944,287 C142.485845,287 136,293.491871 136,301.5 C136,309.50989 142.496323,316 150.509944,316 L261,316 L261,426.490056 C261,434.514155 267.491871,441 275.5,441 C283.50989,441 290,434.503677 290,426.490056 L290,316 L400.490056,316 C408.514155,316 415,309.508129 415,301.5 C415,293.49011 408.503677,287 400.490056,287 L290,287 Z" id="Combined-Shape" stroke="none" fill-rule="evenodd"></path>
</svg>
</nav>

CSS:

#circle {
display: inline-block;
margin-top: 0px;
fill:#5900FF;
margin-right: 8px;
float: right;
z-index: 0;
position: relative;
}

#cross {
stroke: none;
fill: black;
margin-top: 5px;
float: right;
z-index: 1;
position: relative;
}

No consigo posicionar lac cruz sobre el circulo

[img]http://imgur.com/a/E2UFW[/img]