SDGs

Documentation and examples for the specific usage of the official SDGs communication materials.

Communication Materials

The Sustainable Development Goals (SDGs) logo, including the colour wheel and 17 icons are available for download. Please read the guidelines for their use.

Solution Cards 

<a class="btn-animated-border animated-prev">
          <svg width="52" height="52" viewBox="0 0 52 52">
            <circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
          </svg>
          <i class="fas fa-long-arrow-left"></i>
        </a>

        <a class="btn-animated-border animated-prev">
          <svg width="52" height="52" viewBox="0 0 52 52">
            <circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
          </svg>
          <i class="fas fa-angle-left"></i>
        </a>
.btn-animated-border {
            display: inline-block;
            text-align: center;
            position: relative;
            line-height: 52px;
            width: 52px;
            height: 52px;
            border-radius: 26px;
            background: transparent;
            border: 0;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
            &:before {
              content: '';
              position: absolute;
              width: 52px;
              height: 52px;
              top: 0;
              left: 0;
              border-radius: 26px;
              border: 1px solid #E9EFF4;
              z-index: 0;
              transition: border-color .8s cubic-bezier(.165,.84,.44,1) 0s;
          }
          &.animated-prev {
            &:hover
              svg {
                circle {
                  stroke-dashoffset: 0
                }
              }
            }
          }
          &.animated-next {
            &:hover
              svg {
                circle {
                  stroke-dashoffset: 314.16
                }
              }
            }
          }
          svg {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              transform: rotate(-90deg);
              z-index: 1;
              circle {
                stroke-dasharray: 157.08;
                stroke-dashoffset: 157.08;
                transition: stroke-dashoffset .8s cubic-bezier(.165,.84,.44,1) 0s;
            }
          }
          i {
            color: #7C8C9C
          }
        }

SDG's of Aplication

The Sustainable Development Goals are a call to action to end poverty, protect the planet and ensure peace and prosperity everywhere.
SDG 6
Clean Water and
Sanitation
SDG 6 icon
SDG 7
Affordable and
Clean Energy
SDG 7 icon
SDG 9
Industry, Innovation
and Infrastructure
SDG 9 icon
SDG 11
Sustainable Cities
and Communities
SDG 11 icon
SDG 12
Responsible Consumption
and production
SDG 12 icon 
<a class="btn-animated-border animated-prev">
          <svg width="52" height="52" viewBox="0 0 52 52">
            <circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
          </svg>
          <i class="fas fa-long-arrow-left"></i>
        </a>

        <a class="btn-animated-border animated-prev">
          <svg width="52" height="52" viewBox="0 0 52 52">
            <circle cx="26" cy="26" r="25" fill="none" stroke="#ff8300" stroke-width="1.2"></circle>
          </svg>
          <i class="fas fa-angle-left"></i>
        </a>
.btn-animated-border {
            display: inline-block;
            text-align: center;
            position: relative;
            line-height: 52px;
            width: 52px;
            height: 52px;
            border-radius: 26px;
            background: transparent;
            border: 0;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
            &:before {
              content: '';
              position: absolute;
              width: 52px;
              height: 52px;
              top: 0;
              left: 0;
              border-radius: 26px;
              border: 1px solid #E9EFF4;
              z-index: 0;
              transition: border-color .8s cubic-bezier(.165,.84,.44,1) 0s;
          }
          &.animated-prev {
            &:hover
              svg {
                circle {
                  stroke-dashoffset: 0
                }
              }
            }
          }
          &.animated-next {
            &:hover
              svg {
                circle {
                  stroke-dashoffset: 314.16
                }
              }
            }
          }
          svg {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              transform: rotate(-90deg);
              z-index: 1;
              circle {
                stroke-dasharray: 157.08;
                stroke-dashoffset: 157.08;
                transition: stroke-dashoffset .8s cubic-bezier(.165,.84,.44,1) 0s;
            }
          }
          i {
            color: #7C8C9C
          }
        }