Revision history [back]

You can use CSS Flexbox to align the SVG icon vertically next to the span. Here’s an example:

HTML:

<div class="container">
  <span>Some text</span>
  <svg class="icon" viewBox="0 0 24 24">
    <path d="M12 21a9 9 0 0 1-7.38-3.85l-.19-.3A8.93 8.93 0 0 1 4.23 9H3a1 1 0 0 1 0-2h1.23a8.93 8.93 0 0 1 .2-8.85l.18-.3A9 9 0 0 1 12 3a9 9 0 0 1 7.38 3.85l.19.3A8.93 8.93 0 0 1 19.77 15h1a1 1 0 0 1 0 2h-1.23a8.93 8.93 0 0 1-.2 8.85l-.18.3A9 9 0 0 1 12 21zm-7.85-4.15a7 7 0 1 0 9.9 0 7 7 0 0 0-9.9 0z"/>
  </svg>
</div>

CSS:

.container {
  display: flex;
  align-items: center;
}

.icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

In the HTML, we have a container div that wraps around the span and SVG icon. We apply the CSS display: flex; and align-items: center; to the container, which vertically aligns its child elements. We also give the SVG icon a left margin of 8px to add some space between the span and icon.

Note that in this example, we’ve added a sample SVG icon using a path element. You’ll need to replace this with your own SVG code or reference an external SVG file using an img tag.