.icon {
  display: inline;
  float: left;
  margin: 5px 20px 0px 0px;
}

 .gg-data {
 transform: scale(var(--ggs,1))
}

.gg-data,
.gg-data::after,
.gg-data::before {
 box-sizing: border-box;
 position: relative;
 display: block;
 border: 2px solid;
 border-radius: 50%;
 width: 14px;
 height: 14px
}

.gg-data::after,
.gg-data::before {
 content: "";
 position: absolute;
 width: 6px;
 height: 6px;
 top: 2px;
 left: 2px
}

.gg-data::after {
 background: linear-gradient( to left,
 currentColor 8px,transparent 0)
 no-repeat bottom center/2px 8px;
 width: 22px;
 height: 22px;
 top: -6px;
 left: -6px
}

.gg-data,
.gg-data::after {
 border-top-color: transparent;
 border-bottom-color: transparent
} 

 .gg-disc,
.gg-disc::after,
.gg-disc::before {
 display: block;
 box-sizing: border-box;
 border: 2px solid;
 border-radius: 50%
}

.gg-disc {
 border-top-color: transparent;
 border-bottom-color: transparent;
 transform: rotate(45deg) scale(var(--ggs,1));
 position: relative;
 width: 14px;
 height: 14px
}

.gg-disc::after,
.gg-disc::before {
 content: "";
 position: absolute;
 width: 6px;
 height: 6px;
 top: 2px;
 left: 2px
}

.gg-disc::after {
 width: 22px;
 height: 22px;
 border-radius: 100%;
 top: -6px;
 left: -6px
} 

 .gg-zoom-in {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid;
 border-radius: 100%;
 background:
 linear-gradient(to bottom,
 currentColor 5px,transparent 0)
 no-repeat 2px 5px/8px 2px;
 margin-top: -4px
 }

 .gg-zoom-in::after,
 .gg-zoom-in::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 2px;
 height: 8px;
 background: currentColor
 }

 .gg-zoom-in::after {
 transform: rotate(-45deg);
 border-radius: 3px;
 top: 10px;
 left: 12px
 }

 .gg-zoom-in::before {
 top: 2px;
 left: 5px
 } 
 .gg-live-photo {
 transform: scale(var(--ggs,1))
}

.gg-live-photo,
.gg-live-photo::after {
 box-sizing: border-box;
 position: relative;
 display: block;
 width: 20px;
 height: 20px;
 border-radius: 100px;
 border: 2px dotted currentColor
}

.gg-live-photo::after {
 content: "";
 position: absolute;
 width: 8px;
 height: 8px;
 border: 1px solid transparent;
 top: 4px;
 left: 4px;
 box-shadow:
 0 0 0 2px,
 inset 0 0 0 2px currentColor
} 

 .gg-presentation {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 20px;
 height: 20px;
 border: 2px solid;
 border-radius: 22px
}

.gg-presentation::after,
.gg-presentation::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute
}

.gg-presentation::before {
 width: 12px;
 height: 6px;
 border: 2px solid;
 border-top-left-radius: 100px;
 border-top-right-radius: 100px;
 top: 2px;
 left: 2px;
 border-bottom: 0
}

.gg-presentation::after {
 width: 18px;
 height: 2px;
 background: currentColor;
 left: -1px;
 top: 8px
} 
 .gg-zoom-in {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: scale(var(--ggs,1));
 width: 16px;
 height: 16px;
 border: 2px solid;
 border-radius: 100%;
 background:
 linear-gradient(to bottom,
 currentColor 5px,transparent 0)
 no-repeat 2px 5px/8px 2px;
 margin-top: -4px
 }

 .gg-zoom-in::after,
 .gg-zoom-in::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 2px;
 height: 8px;
 background: currentColor
 }

 .gg-zoom-in::after {
 transform: rotate(-45deg);
 border-radius: 3px;
 top: 10px;
 left: 12px
 }

 .gg-zoom-in::before {
 top: 2px;
 left: 5px
 }