Menu

AI SVG Studio
Sign in
Diploma SVG icon, line

Diploma SVG icon, line

A rolled certificate is tied at the middle, with curled ends showing. Add it to course completion pages and graduation program layouts.

Free ยท from Education icons, line

Similar SVGs

More from Education icons, line

Whole pack

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-rXZ3zwr21_M/amnt.svg" alt="Diploma" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8c-1.7 0-3 1.8-3 4s1.3 4 3 4h14c1.7 0 3-1.8 3-4s-1.3-4-3-4H5Z"/><path d="M5 8c1.7 0 3 1.8 3 4s-1.3 4-3 4"/><path d="M19 8c-1.7 0-3 1.8-3 4s1.3 4 3 4"/><path d="M11 8v8m2-8v8"/><path d="m11 10-2-2m4 2 2-2m-4 6-2 2m4-2 2 2"/></svg>
CSS background-image
.diploma {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-rXZ3zwr21_M/amnt.svg");
  background-size: contain;
}
CSS mask-image (takes the text colour)
.diploma {
  width: 1.5em; height: 1.5em;
  background-color: currentColor;
  mask: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/-rXZ3zwr21_M/amnt.svg") center / contain no-repeat;
}
React
import DiplomaSvg from "./diploma.jsx"; // from the React tab above

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

Tags

diplomacertificategraduationeducationiconline

Made with AMNT

AMNT SVG 1.1 drew this from the words Diploma: Rolled certificate tied at the middle, with curled ends visible. as part of the pack Education icons, line. 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