Menu

AI SVG Studio
Sign in
Circle Frame SVG element, flat

Circle Frame SVG element, flat

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.

Free ยท from Frames elements, flat

Similar SVGs

More from Frames elements, flat

Whole pack

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} />

Tags

circleframeroundborderframeselementflat

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.

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

Settings