.svg-icon,
.svg-icon-10,
.svg-icon-20,
.svg-icon-30,
.svg-icon-40,
.svg-icon-50 {
position: relative;
display: inline-block; /* Changed to inline-block for better layout control */
}
.svg-icon { width: 18px; height: 18px; }
.svg-icon-10 { width: 10px; height: 10px; }
.svg-icon-20 { width: 20px; height: 20px; }
.svg-icon-30 { width: 30px; height: 30px; }
.svg-icon-40 { width: 40px; height: 40px; }
.svg-icon-50 { width: 50px; height: 50px; }
.svg-icon::before,
.svg-icon-10::before,
.svg-icon-20::before,
.svg-icon-30::before,
.svg-icon-40::before,
.svg-icon-50::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* Center the icon */
width: calc(100% - 5px); /* Reduce width to create padding */
height: calc(100% - 5px); /* Reduce height to create padding */
background-color: #616161;
-webkit-mask-size: contain; /* Changed to contain for better scaling */
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
z-index: 1;
}
.svg-icon::after,
.svg-icon-10::after,
.svg-icon-20::after,
.svg-icon-30::after,
.svg-icon-40::after,
.svg-icon-50::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
border: 1px solid black;
border-radius: 25%;
z-index: 0;
}
[class*="svg-icon-"]::before {
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-repeat: no-repeat;
mask-position: center;
}
/* If you want to allow color overrides, you can add this */
.custom-color::before {
background-color: currentColor;
}
.adjustments-horizontal {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.adjustments-vertical {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.trash::before {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.ellipsis-vertical {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.ellipsis-horizontal {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-down-tray {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.refresh {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrows-pointing-out {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrows-pointing-in {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.bell {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.bookmark {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chart-pie {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.check-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.cloud-arrow-down {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.cloud-arrow-up {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.cloud {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.cog-6-tooth {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.desktop {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.tablet {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.mobile {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.square-3-stack-3d {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.squares-2x2 {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.squares-plus {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.star {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.tv {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.user-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.user-group {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.user-minus {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.user-plus {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.user {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.users {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.video-camera {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.x-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.wrench {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.exclamation-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-left-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-right-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.document-duplicate {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-double-down {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-double-left {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-double-right {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-double-up {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-down {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-left {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-right {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-up {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.chevron-up-down {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.photo {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.share {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.sparkles {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.clipboard {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.academic-cap {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.list-bullet {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.rectangle-stack {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.calendar {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.plus {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.plus-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.minus {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.minus-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.home {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.pencil {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.pencil-square {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-left {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-right {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-down {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-down-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-up {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.arrow-up-circle {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.window {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.popup-out {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}
.magnifying-glass {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8, ');
}
.cube {
-webkit-mask: url('data:image/svg+xml;charset=UTF-8,');
mask: url('data:image/svg+xml;charset=UTF-8,');
}