Circle Frame SVG element, flat

Free

This large circular ring leaves its centre open for an image or label. Place it around a profile photo in a directory or a number on an event badge.

Fixed colourcurrentColor becomes your colour

Inline styleOne style attribute per shape

Minified

circle frame round border frames element flat

How to use it

HTML <img>

<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ANpssNjYkqS6/amnt.svg" alt="Circle Frame" width="48" height="48">

Inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M100 8a92 92 0 1 0 0 184 92 92 0 0 0 0-184Zm0 22a70 70 0 1 1 0 140 70 70 0 0 1 0-140Z"/></svg>

CSS background-image

.circle-frame {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ANpssNjYkqS6/amnt.svg");
  background-size: contain;
}

CSS mask-image (takes the text colour)

.circle-frame {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ANpssNjYkqS6/amnt.svg") center / contain no-repeat;
}

React

import CircleFrameSvg from "./circle-frame.jsx"; // from the React tab above

<CircleFrameSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Circle Frame: Large circular ring with a clear, open centre. as part of the pack Frames elements, flat. Want one like it? Make your own in the SVG studio.

Rest of Frames elements, flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence