SVG 响应式社交媒体列表/矢量图标集合

B. Social。使用SVG构造了国外主流社交媒体的矢量图标。

icon

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2301
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url("http://fonts.googleapis.com/css?family=Josefin+Slab:100");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    font-family: 'Josefin Slab', serif;
    font-size: 16;
}
body {
    background: #555;
}
h1 {
    color: rgba(255, 255, 255, 0.9);
    padding: 4rem 0;
    font-size: 2rem;
    font-weight: 100;
    letter-spacing: 0.4rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
}
main {
    position: relative;
    width: 100%;
    min-height: 80%;
    padding: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: row wrap;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
}
@media screen and (min-width: 800px) {
    main {
        width: 800px;
        margin: 0 auto;
    }
}
.icon {
    width: 120px;
    height: 120px;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 120px;
    -ms-flex: 1 0 120px;
    flex: 1 0 120px;
    cursor: pointer;
}
.icon:hover svg {
    width: 60%;
    height: 60%;
    left: -10%;
    top: 20%;
}
.icon:hover path {
    fill: rgba(255, 255, 255, 0.9);
}
.icon:hover .shadow {
    fill: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
}
svg {
    position: absolute;
    width: 40%;
    height: 40%;
    left: 30%;
    top: 30%;
    overflow: visible;
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
svg path {
    fill: rgba(221, 238, 221, 0.4);
    -webkit-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
.shadow {
    fill: transparent;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-transform: scale(1.2, 1.2) perspective(300px) rotateX(250deg) skew(-65deg);
    transform: scale(1.2, 1.2) perspective(300px) rotateX(250deg) skew(-65deg);
}

HTML

<h1>B. SOCIAL</h1>
<main>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="codepen">
                    <path d="M399,124.8L217.3,3.2c-6.4-4.3-13.2-4.3-19.6,0L1,124.8c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1v2.1v125.9v2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1l187.9,125.9c2.1,2.1,6.5,2.1,10.8,2.1c4.3,0,6.8,0,11.1-2.1L399,272c0,0,0,0,0-2.1c0,0,0,0,0-2.1c0,0,0,0,0-2.1c0,0,0,0,0-2.1v-2.1V145.8v-6.1V124.8z M217,45.9l138.6,91.7l-61.8,42.7L217,129.1V45.9z M183,45.9v83.2l-76.9,51.2l-61.8-40.5L183,45.9z M30,171.7l44.8,29.9L30,231.5V171.7zM183,357.3L44.2,265.6l61.9-42.7l76.9,51.2V357.3z M199.8,244.3L138,201.6l61.9-42.7l61.9,42.7L199.8,244.3z M217,357.3v-83.2l76.7-51.2l61.9,40.5L217,357.3z M370,231.5l-44.8-29.9l44.8-29.9V231.5z"
                    class="shadow"></path>
                    <path d="M399,124.8L217.3,3.2c-6.4-4.3-13.2-4.3-19.6,0L1,124.8c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1v2.1v125.9v2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1c0,0,0,0,0,2.1l187.9,125.9c2.1,2.1,6.5,2.1,10.8,2.1c4.3,0,6.8,0,11.1-2.1L399,272c0,0,0,0,0-2.1c0,0,0,0,0-2.1c0,0,0,0,0-2.1c0,0,0,0,0-2.1v-2.1V145.8v-6.1V124.8z M217,45.9l138.6,91.7l-61.8,42.7L217,129.1V45.9z M183,45.9v83.2l-76.9,51.2l-61.8-40.5L183,45.9z M30,171.7l44.8,29.9L30,231.5V171.7zM183,357.3L44.2,265.6l61.9-42.7l76.9,51.2V357.3z M199.8,244.3L138,201.6l61.9-42.7l61.9,42.7L199.8,244.3z M217,357.3v-83.2l76.7-51.2l61.9,40.5L217,357.3z M370,231.5l-44.8-29.9l44.8-29.9V231.5z">
                    </path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="youtube">
                    <path d="M315.3,292.6h-22l0.1-12.8c0-5.7,4.7-10.3,10.3-10.3h1.4c5.7,0,10.4,4.6,10.4,10.3L315.3,292.6zM232.9,265.3c-5.6,0-10.1,3.7-10.1,8.3v62c0,4.6,4.6,8.3,10.1,8.3c5.6,0,10.2-3.7,10.2-8.3v-62C243.1,269,238.5,265.3,232.9,265.3z M366.7,230.6v118c0,28.3-24.5,51.5-54.5,51.5H87.9c-30,0-54.5-23.2-54.5-51.5v-118c0-28.3,24.5-51.5,54.5-51.5h224.3C342.1,179.1,366.7,202.3,366.7,230.6z M102.8,361.4l0-124.3l27.8,0v-18.4l-74.1-0.1v18.1l23.1,0.1v124.6H102.8z M186.2,255.6H163V322c0,9.6,0.6,14.4,0,16.1c-1.9,5.1-10.4,10.6-13.7,0.6c-0.6-1.8-0.1-7.1-0.1-16.2l-0.1-66.8h-23l0.1,65.8c0,10.1-0.2,17.6,0.1,21c0.6,6,0.4,13.1,6,17.1c10.4,7.5,30.4-1.1,35.4-11.9l0,13.7l18.6,0L186.2,255.6L186.2,255.6z M260.3,331.6l0-55.2c0-21-15.8-33.7-37.1-16.6l0.1-41.1l-23.2,0l-0.1,141.7l19-0.3l1.7-8.8C245.1,373.7,260.3,358.4,260.3,331.6z M332.8,324.3l-17.4,0.1c0,0.7,0,1.5,0,2.4v9.7c0,5.2-4.3,9.4-9.5,9.4h-3.4c-5.2,0-9.5-4.2-9.5-9.4v-1.1v-10.7v-13.8h39.8v-15c0-10.9-0.3-21.9-1.2-28.1C328.8,248,301,244.8,287,255c-4.4,3.2-7.8,7.4-9.7,13.1c-2,5.7-3,13.5-3,23.4v32.9C274.3,379.1,340.8,371.4,332.8,324.3z M243.7,145.5c1.2,2.9,3.1,5.3,5.6,7c2.5,1.8,5.7,2.6,9.5,2.6c3.3,0,6.3-0.9,8.9-2.8c2.6-1.9,4.7-4.6,6.5-8.3l-0.4,9.1h25.8V43.3h-20.3v85.5c0,4.6-3.8,8.4-8.5,8.4c-4.6,0-8.5-3.8-8.5-8.4V43.3H241v74.1c0,9.4,0.2,15.7,0.4,18.9C241.8,139.5,242.5,142.5,243.7,145.5z M165.4,83.4c0-10.5,0.9-18.8,2.6-24.7c1.8-5.9,4.9-10.7,9.5-14.3c4.6-3.6,10.4-5.4,17.5-5.4c6,0,11.1,1.2,15.4,3.5c4.3,2.3,7.6,5.3,9.9,9c2.3,3.7,3.9,7.5,4.8,11.4c0.9,4,1.3,9.9,1.3,18v27.8c0,10.2-0.4,17.7-1.2,22.4c-0.8,4.8-2.5,9.2-5.1,13.4c-2.6,4.1-5.9,7.2-9.9,9.1c-4.1,2-8.7,2.9-14,2.9c-5.9,0-10.8-0.8-14.9-2.5c-4.1-1.7-7.3-4.2-9.5-7.6c-2.3-3.4-3.9-7.5-4.9-12.3c-1-4.8-1.4-12-1.4-21.7L165.4,83.4L165.4,83.4z M185.6,127.1c0,6.2,4.6,11.3,10.3,11.3c5.6,0,10.3-5.1,10.3-11.3V68.6c0-6.2-4.6-11.3-10.3-11.3c-5.6,0-10.3,5.1-10.3,11.3V127.1z M114.1,156.6h24.4l0-84.3l28.8-72.2h-26.7l-15.3,53.6L109.8,0H83.5l30.6,72.4L114.1,156.6z"
                    class="shadow"></path>
                    <path d="M315.3,292.6h-22l0.1-12.8c0-5.7,4.7-10.3,10.3-10.3h1.4c5.7,0,10.4,4.6,10.4,10.3L315.3,292.6zM232.9,265.3c-5.6,0-10.1,3.7-10.1,8.3v62c0,4.6,4.6,8.3,10.1,8.3c5.6,0,10.2-3.7,10.2-8.3v-62C243.1,269,238.5,265.3,232.9,265.3z M366.7,230.6v118c0,28.3-24.5,51.5-54.5,51.5H87.9c-30,0-54.5-23.2-54.5-51.5v-118c0-28.3,24.5-51.5,54.5-51.5h224.3C342.1,179.1,366.7,202.3,366.7,230.6z M102.8,361.4l0-124.3l27.8,0v-18.4l-74.1-0.1v18.1l23.1,0.1v124.6H102.8z M186.2,255.6H163V322c0,9.6,0.6,14.4,0,16.1c-1.9,5.1-10.4,10.6-13.7,0.6c-0.6-1.8-0.1-7.1-0.1-16.2l-0.1-66.8h-23l0.1,65.8c0,10.1-0.2,17.6,0.1,21c0.6,6,0.4,13.1,6,17.1c10.4,7.5,30.4-1.1,35.4-11.9l0,13.7l18.6,0L186.2,255.6L186.2,255.6z M260.3,331.6l0-55.2c0-21-15.8-33.7-37.1-16.6l0.1-41.1l-23.2,0l-0.1,141.7l19-0.3l1.7-8.8C245.1,373.7,260.3,358.4,260.3,331.6z M332.8,324.3l-17.4,0.1c0,0.7,0,1.5,0,2.4v9.7c0,5.2-4.3,9.4-9.5,9.4h-3.4c-5.2,0-9.5-4.2-9.5-9.4v-1.1v-10.7v-13.8h39.8v-15c0-10.9-0.3-21.9-1.2-28.1C328.8,248,301,244.8,287,255c-4.4,3.2-7.8,7.4-9.7,13.1c-2,5.7-3,13.5-3,23.4v32.9C274.3,379.1,340.8,371.4,332.8,324.3z M243.7,145.5c1.2,2.9,3.1,5.3,5.6,7c2.5,1.8,5.7,2.6,9.5,2.6c3.3,0,6.3-0.9,8.9-2.8c2.6-1.9,4.7-4.6,6.5-8.3l-0.4,9.1h25.8V43.3h-20.3v85.5c0,4.6-3.8,8.4-8.5,8.4c-4.6,0-8.5-3.8-8.5-8.4V43.3H241v74.1c0,9.4,0.2,15.7,0.4,18.9C241.8,139.5,242.5,142.5,243.7,145.5z M165.4,83.4c0-10.5,0.9-18.8,2.6-24.7c1.8-5.9,4.9-10.7,9.5-14.3c4.6-3.6,10.4-5.4,17.5-5.4c6,0,11.1,1.2,15.4,3.5c4.3,2.3,7.6,5.3,9.9,9c2.3,3.7,3.9,7.5,4.8,11.4c0.9,4,1.3,9.9,1.3,18v27.8c0,10.2-0.4,17.7-1.2,22.4c-0.8,4.8-2.5,9.2-5.1,13.4c-2.6,4.1-5.9,7.2-9.9,9.1c-4.1,2-8.7,2.9-14,2.9c-5.9,0-10.8-0.8-14.9-2.5c-4.1-1.7-7.3-4.2-9.5-7.6c-2.3-3.4-3.9-7.5-4.9-12.3c-1-4.8-1.4-12-1.4-21.7L165.4,83.4L165.4,83.4z M185.6,127.1c0,6.2,4.6,11.3,10.3,11.3c5.6,0,10.3-5.1,10.3-11.3V68.6c0-6.2-4.6-11.3-10.3-11.3c-5.6,0-10.3,5.1-10.3,11.3V127.1z M114.1,156.6h24.4l0-84.3l28.8-72.2h-26.7l-15.3,53.6L109.8,0H83.5l30.6,72.4L114.1,156.6z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="twitter">
                    <path d="M400,76c-15.2,6.6-30.7,10.8-46.9,13c17.4-9.8,30.7-26.3,36.1-45.9c-16.4,9.8-33.9,16.4-52.3,19.6c-15.4-16.2-36.1-26.3-60.2-26.3c-46.1,0.2-82.2,37.3-82.2,82.2c0,6.6,1,13,2.2,18.6c-68.8-3.2-128.9-36.1-170.4-86.4c-7.6,12-10.8,26.3-10.8,41.5c0,28.5,14.2,53.5,37.1,68.8c-13,0-26.3-4.4-37.1-9.8v1c0,40.5,28.5,73.2,66.6,80.8c-6.6,2.2-14.2,3.2-21.9,3.2c-5.4,0-10.8,0-15.2-1c10.6,33.1,41.3,56.9,77.4,56.9c-28.5,21.9-63.4,35.1-102.7,35.1c-6.6,0-13,0-19.6-1c36.1,22.9,79.8,37.1,126.7,37.1c152,0,235-125.7,235-235c0-3.2,0-7.6,0-10.8C374.7,107.9,389,93.6,400,76z"
                    class="shadow"></path>
                    <path d="M400,76c-15.2,6.6-30.7,10.8-46.9,13c17.4-9.8,30.7-26.3,36.1-45.9c-16.4,9.8-33.9,16.4-52.3,19.6c-15.4-16.2-36.1-26.3-60.2-26.3c-46.1,0.2-82.2,37.3-82.2,82.2c0,6.6,1,13,2.2,18.6c-68.8-3.2-128.9-36.1-170.4-86.4c-7.6,12-10.8,26.3-10.8,41.5c0,28.5,14.2,53.5,37.1,68.8c-13,0-26.3-4.4-37.1-9.8v1c0,40.5,28.5,73.2,66.6,80.8c-6.6,2.2-14.2,3.2-21.9,3.2c-5.4,0-10.8,0-15.2-1c10.6,33.1,41.3,56.9,77.4,56.9c-28.5,21.9-63.4,35.1-102.7,35.1c-6.6,0-13,0-19.6-1c36.1,22.9,79.8,37.1,126.7,37.1c152,0,235-125.7,235-235c0-3.2,0-7.6,0-10.8C374.7,107.9,389,93.6,400,76z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="stackoverflow">
                    <path d="M277.1,235.7c9,0,17.9,0,26.8,0c0,54.8,0,109.5,0,164.3c-87,0-173.9,0-260.8,0c0-54.8,0-109.5,0-164.3c8.9,0,17.8,0,26.8,0c0,45.9,0,91.7,0,137.6c69.1,0,138,0,207.2,0C277.1,327.5,277.1,281.7,277.1,235.7z M200.8,51.9c29.7,43.6,59.3,87,89,130.5c9.4-6.4,18.6-12.7,27.9-19c-29.7-43.6-59.4-87-89-130.5C219.3,39.3,210.1,45.6,200.8,51.9z M284.3,187c-45.4-26.8-90.7-53.5-136-80.2c-5.8,9.8-11.4,19.3-17.2,29.1c45.3,26.7,90.6,53.4,136.1,80.2C272.9,206.3,278.6,196.7,284.3,187zM329.9,0c-11.1,1.9-22.1,3.8-33.2,5.8c9,52,18,103.7,27,155.6c11.2-1.9,22.2-3.9,33.3-5.8C347.9,103.6,338.9,51.8,329.9,0zM264.4,225.6c-50.9-13.7-101.6-27.3-152.5-41c-2.9,10.9-5.8,21.7-8.8,32.6c50.9,13.7,101.7,27.3,152.5,41C258.6,247.2,261.5,236.5,264.4,225.6z M250.1,313c-52.6,0-105.1,0-157.7,0c0,11.3,0,22.4,0,33.6c52.6,0,105.1,0,157.7,0C250.1,335.2,250.1,324.1,250.1,313z M254,269.6c-52.5-4.8-104.8-9.7-157.2-14.5c-1.1,11.3-2.1,22.4-3.1,33.6c52.5,4.8,104.8,9.7,157.3,14.5C252,291.9,253,280.8,254,269.6z"
                    class="shadow"></path>
                    <path d="M277.1,235.7c9,0,17.9,0,26.8,0c0,54.8,0,109.5,0,164.3c-87,0-173.9,0-260.8,0c0-54.8,0-109.5,0-164.3c8.9,0,17.8,0,26.8,0c0,45.9,0,91.7,0,137.6c69.1,0,138,0,207.2,0C277.1,327.5,277.1,281.7,277.1,235.7z M200.8,51.9c29.7,43.6,59.3,87,89,130.5c9.4-6.4,18.6-12.7,27.9-19c-29.7-43.6-59.4-87-89-130.5C219.3,39.3,210.1,45.6,200.8,51.9z M284.3,187c-45.4-26.8-90.7-53.5-136-80.2c-5.8,9.8-11.4,19.3-17.2,29.1c45.3,26.7,90.6,53.4,136.1,80.2C272.9,206.3,278.6,196.7,284.3,187zM329.9,0c-11.1,1.9-22.1,3.8-33.2,5.8c9,52,18,103.7,27,155.6c11.2-1.9,22.2-3.9,33.3-5.8C347.9,103.6,338.9,51.8,329.9,0zM264.4,225.6c-50.9-13.7-101.6-27.3-152.5-41c-2.9,10.9-5.8,21.7-8.8,32.6c50.9,13.7,101.7,27.3,152.5,41C258.6,247.2,261.5,236.5,264.4,225.6z M250.1,313c-52.6,0-105.1,0-157.7,0c0,11.3,0,22.4,0,33.6c52.6,0,105.1,0,157.7,0C250.1,335.2,250.1,324.1,250.1,313z M254,269.6c-52.5-4.8-104.8-9.7-157.2-14.5c-1.1,11.3-2.1,22.4-3.1,33.6c52.5,4.8,104.8,9.7,157.3,14.5C252,291.9,253,280.8,254,269.6z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="pintrest">
                    <path d="M309.2,42.5c-52.4-57-140.9-53.2-199.7-9.2C59.4,70.8,24,154.1,66.1,210.8c8.6,11.6,21.2,18.6,35.2,21.5c3.7,0.8,6.7-1.1,8-4.6c2.8-7.6,5.8-14.7,6.5-22.8c0.2-3.1-2.2-4.8-4.8-5c-38.2-42-12.3-94.2,25-126.5c32.9-28.6,93.4-55.3,132.1-22.4c26.7,22.7,28.7,65.1,27.5,97.2c-1.6,40.2-15.7,82.6-57.4,95.4c-13.7,4.2-29.6,2.5-38.8-9.6c-10.3-13.7-7-30.1-3.1-45.2c6-23.2,20.3-56.1,6.8-79c-16.3-27.8-49.2-2.5-58.7,16.2c-5.8,11.4-16.2,47.9-0.8,57.3c-16.3,41.4-27.4,86.8-34.8,130.4c-3.3,19.6-6.4,41.1-2.7,60.9c0.2,1,4.4,15.9,8.7,21.7c-0.7,3.7,4.9,5.1,7.1,2.2c15.1-20.1,30.5-39.4,38.8-63.5c4.4-12.8,6.1-26.8,8.7-40c1.9-9.3,5.6-19.8,6.6-29.7c0.1,0,0.1,0,0.2,0c13,10,30.5,18.4,45.9,21.4c24.3,4.7,52.9-4.3,72.7-18c3-2.1,6.1-4.6,9-7.4c9.2-6.1,17.5-14,24.7-24C369.3,179.7,355.3,92.7,309.2,42.5z"
                    class="shadow"></path>
                    <path d="M309.2,42.5c-52.4-57-140.9-53.2-199.7-9.2C59.4,70.8,24,154.1,66.1,210.8c8.6,11.6,21.2,18.6,35.2,21.5c3.7,0.8,6.7-1.1,8-4.6c2.8-7.6,5.8-14.7,6.5-22.8c0.2-3.1-2.2-4.8-4.8-5c-38.2-42-12.3-94.2,25-126.5c32.9-28.6,93.4-55.3,132.1-22.4c26.7,22.7,28.7,65.1,27.5,97.2c-1.6,40.2-15.7,82.6-57.4,95.4c-13.7,4.2-29.6,2.5-38.8-9.6c-10.3-13.7-7-30.1-3.1-45.2c6-23.2,20.3-56.1,6.8-79c-16.3-27.8-49.2-2.5-58.7,16.2c-5.8,11.4-16.2,47.9-0.8,57.3c-16.3,41.4-27.4,86.8-34.8,130.4c-3.3,19.6-6.4,41.1-2.7,60.9c0.2,1,4.4,15.9,8.7,21.7c-0.7,3.7,4.9,5.1,7.1,2.2c15.1-20.1,30.5-39.4,38.8-63.5c4.4-12.8,6.1-26.8,8.7-40c1.9-9.3,5.6-19.8,6.6-29.7c0.1,0,0.1,0,0.2,0c13,10,30.5,18.4,45.9,21.4c24.3,4.7,52.9-4.3,72.7-18c3-2.1,6.1-4.6,9-7.4c9.2-6.1,17.5-14,24.7-24C369.3,179.7,355.3,92.7,309.2,42.5z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="linkedin">
                    <path d="M400,243.2v147.9h-85.7v-138c0-34.7-12.4-58.3-43.4-58.3c-23.7,0-37.8,15.9-44,31.4c-2.3,5.5-2.8,13.2-2.8,20.9v144h-85.8c0,0,1.2-233.7,0-257.9H224v36.6c-0.2,0.3-0.4,0.6-0.6,0.8h0.6v-0.8c11.4-17.5,31.7-42.6,77.3-42.6C357.7,127.2,400,164,400,243.2z M48.5,8.9C19.2,8.9,0,28.1,0,53.4C0,78.2,18.6,98,47.4,98H48c29.9,0,48.5-19.8,48.5-44.6C95.9,28.1,77.9,8.9,48.5,8.9z M5.1,391.1h85.7V133.2H5.1V391.1z"
                    class="shadow"></path>
                    <path d="M400,243.2v147.9h-85.7v-138c0-34.7-12.4-58.3-43.4-58.3c-23.7,0-37.8,15.9-44,31.4c-2.3,5.5-2.8,13.2-2.8,20.9v144h-85.8c0,0,1.2-233.7,0-257.9H224v36.6c-0.2,0.3-0.4,0.6-0.6,0.8h0.6v-0.8c11.4-17.5,31.7-42.6,77.3-42.6C357.7,127.2,400,164,400,243.2z M48.5,8.9C19.2,8.9,0,28.1,0,53.4C0,78.2,18.6,98,47.4,98H48c29.9,0,48.5-19.8,48.5-44.6C95.9,28.1,77.9,8.9,48.5,8.9z M5.1,391.1h85.7V133.2H5.1V391.1z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="instagram">
                    <path d="M320.8,200c0,66.3-54.5,120.8-120.8,120.8S79.2,266.3,79.2,200c0-8.3,1.2-16.3,2.4-23.3H0V337c0,34.9,27.8,62.7,62.7,62.7H337c34.9,0,62.7-27.8,62.7-62.7V176.7h-81.6C319.6,183.7,320.8,192,320.8,200z M337,0.2H63C28.1,0.2,0.2,28.1,0.2,63v67.5h101.2c21.9-31.4,58-51.2,98.8-51.2s76.7,19.6,98.8,51.2H400V63C399.8,28.1,371.7,0.2,337,0.2zM368.4,76.9c0,5.9-4.7,11.6-11.6,11.6h-33.7c-5.9,0-11.6-4.7-11.6-11.6V43.2c0-5.9,4.7-11.6,11.6-11.6h33.7c5.9,0,11.6,4.7,11.6,11.6V76.9z M274.3,200c0-40.6-33.7-74.3-74.3-74.3s-74.3,33.7-74.3,74.3s33.5,74.3,74.3,74.3S274.3,240.6,274.3,200z"
                    class="shadow"></path>
                    <path d="M320.8,200c0,66.3-54.5,120.8-120.8,120.8S79.2,266.3,79.2,200c0-8.3,1.2-16.3,2.4-23.3H0V337c0,34.9,27.8,62.7,62.7,62.7H337c34.9,0,62.7-27.8,62.7-62.7V176.7h-81.6C319.6,183.7,320.8,192,320.8,200z M337,0.2H63C28.1,0.2,0.2,28.1,0.2,63v67.5h101.2c21.9-31.4,58-51.2,98.8-51.2s76.7,19.6,98.8,51.2H400V63C399.8,28.1,371.7,0.2,337,0.2zM368.4,76.9c0,5.9-4.7,11.6-11.6,11.6h-33.7c-5.9,0-11.6-4.7-11.6-11.6V43.2c0-5.9,4.7-11.6,11.6-11.6h33.7c5.9,0,11.6,4.7,11.6,11.6V76.9z M274.3,200c0-40.6-33.7-74.3-74.3-74.3s-74.3,33.7-74.3,74.3s33.5,74.3,74.3,74.3S274.3,240.6,274.3,200z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="googleplus">
                    <path d="M258.7,0h-95.4c-42.5,0-71.9,9.3-98.4,31.2c-20.8,18-33.3,44.1-33.3,69.9c0,39.7,30.3,81.9,86.4,81.9c5.4,0,11.4-0.6,16.6-1l-0.8,1.9c-2.3,5.4-4.4,10.5-4.4,18.5c0,15.5,7.5,25,14.7,34.3l0.9,1.2l-1.6,0.1c-23.2,1.6-66.3,4.5-97.8,23.9C8.4,283.9,5.6,316.1,5.6,325.4c0,37.1,34.6,74.6,111.9,74.6c89.9,0,136.9-49.6,136.9-98.6c0-36.2-21.2-54.1-43.8-73.1l-19-14.8c-5.9-4.9-13.2-10.9-13.2-22.2c0-11,7.3-18.3,13.8-24.8l0.7-0.7c20.5-16.2,43.8-34.5,43.8-74.2c0-39.9-24.9-60.5-36.9-70.4h31.7c0.4,0,0.8-0.1,1.1-0.3l27.3-17.1c0.8-0.5,1.1-1.4,0.9-2.3C260.4,0.6,259.6,0,258.7,0z M219.5,321.8c0,34.8-29.3,56.3-76.5,56.3c-54.8,0-91.6-25.6-91.6-63.7c0-24.9,15.1-42.9,44.7-53.7c23.7-8,54.4-8.4,54.7-8.4c5.2,0,7.8,0,12,0.5C201.1,280.2,219.5,294.5,219.5,321.8z M177.9,153.8c-8.7,8.7-23,14.6-35.4,14.6c-46,0-65.1-60.5-65.1-92.8c0-16.5,3.7-29.1,11.4-38.6c8.4-10.5,22.7-17.2,36.5-17.2c42.2,0,65.6,56.8,65.6,96C190.9,121.9,190.9,140.7,177.9,153.8z"
                    class="shadow"></path>
                    <path d="M392.4,186.8h-50.3v-50.1c0-1.1-0.9-2.1-2.1-2.1h-21.6c-1.1,0-2.1,0.9-2.1,2.1v50.1h-50c-1.1,0-2.1,0.9-2.1,2.1v21.9c0,1.1,0.9,2.1,2.1,2.1h50v50.4c0,1.1,0.9,2.1,2.1,2.1H340c1.1,0,2.1-0.9,2.1-2.1v-50.4h50.3c1.1,0,2.1-0.9,2.1-2.1v-21.9C394.4,187.7,393.5,186.8,392.4,186.8z"
                    class="shadow"></path>
                    <path d="M258.7,0h-95.4c-42.5,0-71.9,9.3-98.4,31.2c-20.8,18-33.3,44.1-33.3,69.9c0,39.7,30.3,81.9,86.4,81.9c5.4,0,11.4-0.6,16.6-1l-0.8,1.9c-2.3,5.4-4.4,10.5-4.4,18.5c0,15.5,7.5,25,14.7,34.3l0.9,1.2l-1.6,0.1c-23.2,1.6-66.3,4.5-97.8,23.9C8.4,283.9,5.6,316.1,5.6,325.4c0,37.1,34.6,74.6,111.9,74.6c89.9,0,136.9-49.6,136.9-98.6c0-36.2-21.2-54.1-43.8-73.1l-19-14.8c-5.9-4.9-13.2-10.9-13.2-22.2c0-11,7.3-18.3,13.8-24.8l0.7-0.7c20.5-16.2,43.8-34.5,43.8-74.2c0-39.9-24.9-60.5-36.9-70.4h31.7c0.4,0,0.8-0.1,1.1-0.3l27.3-17.1c0.8-0.5,1.1-1.4,0.9-2.3C260.4,0.6,259.6,0,258.7,0z M219.5,321.8c0,34.8-29.3,56.3-76.5,56.3c-54.8,0-91.6-25.6-91.6-63.7c0-24.9,15.1-42.9,44.7-53.7c23.7-8,54.4-8.4,54.7-8.4c5.2,0,7.8,0,12,0.5C201.1,280.2,219.5,294.5,219.5,321.8z M177.9,153.8c-8.7,8.7-23,14.6-35.4,14.6c-46,0-65.1-60.5-65.1-92.8c0-16.5,3.7-29.1,11.4-38.6c8.4-10.5,22.7-17.2,36.5-17.2c42.2,0,65.6,56.8,65.6,96C190.9,121.9,190.9,140.7,177.9,153.8z"></path>
                    <path d="M392.4,186.8h-50.3v-50.1c0-1.1-0.9-2.1-2.1-2.1h-21.6c-1.1,0-2.1,0.9-2.1,2.1v50.1h-50c-1.1,0-2.1,0.9-2.1,2.1v21.9c0,1.1,0.9,2.1,2.1,2.1h50v50.4c0,1.1,0.9,2.1,2.1,2.1H340c1.1,0,2.1-0.9,2.1-2.1v-50.4h50.3c1.1,0,2.1-0.9,2.1-2.1v-21.9C394.4,187.7,393.5,186.8,392.4,186.8z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="github">
                    <path d="M351.6,37.1c-10.8-0.2-35.9,3.5-77.9,31.6c-22.9-5.7-47.2-8.5-71.5-8.5c-26.8,0-53.9,3.4-79.2,10.3C62.8,29.4,36.2,37.8,36.2,37.8c-17.4,43.4-6.6,75.5-3.4,83.5C12.4,143.3,0,171.4,0,205.9c0,26,3,49.3,10.2,69.6c0.4,1.6,0.3,1.2,0.9,2.6c1.6,4.2,3.4,8.3,5.4,12.2c0.7,1.4,1.3,2.5,1.3,2.5c20.3,37.9,60.4,62.4,131.7,70.1l107.8,0.1c76-7.5,112.5-32.1,129.3-70.2l1.1-2.5c1.6-3.9,3-7.9,6.8-21.4c3.8-13.5,5.5-36.9,5.5-62.9c0-37.4-14-67.3-36.8-90.1c4-12.9,9.3-41.4-5.3-78C357.8,37.8,355.8,37.2,351.6,37.1L351.6,37.1z M266.6,174.3c17.6,0,32.6,3,43.9,14.8v0c14.1,14.8,22.4,32.7,22.4,52.1c0,90.1-58,92.6-129.5,92.6c-71.5,0-129.5-12.5-129.5-92.6c0-19.2,8.1-37,22.1-51.8c23.3-24.6,62.7-11.6,107.4-11.6C226.3,177.8,247.9,174.3,266.6,174.3L266.6,174.3z M133.4,200.8c-14.9,0-26.9,20.1-26.9,44.9c0,24.8,12.1,44.9,26.9,44.9c14.9,0,26.9-20.1,26.9-44.9C160.3,221,148.3,200.9,133.4,200.8L133.4,200.8z M277.9,200.8c-14.9,0-26.9,20.1-26.9,44.9c0,24.8,12.1,44.9,26.9,44.9c14.9,0,26.9-20.1,26.9-44.9C304.9,221,292.8,200.9,277.9,200.8L277.9,200.8z"
                    class="shadow"></path>
                    <path d="M351.6,37.1c-10.8-0.2-35.9,3.5-77.9,31.6c-22.9-5.7-47.2-8.5-71.5-8.5c-26.8,0-53.9,3.4-79.2,10.3C62.8,29.4,36.2,37.8,36.2,37.8c-17.4,43.4-6.6,75.5-3.4,83.5C12.4,143.3,0,171.4,0,205.9c0,26,3,49.3,10.2,69.6c0.4,1.6,0.3,1.2,0.9,2.6c1.6,4.2,3.4,8.3,5.4,12.2c0.7,1.4,1.3,2.5,1.3,2.5c20.3,37.9,60.4,62.4,131.7,70.1l107.8,0.1c76-7.5,112.5-32.1,129.3-70.2l1.1-2.5c1.6-3.9,3-7.9,6.8-21.4c3.8-13.5,5.5-36.9,5.5-62.9c0-37.4-14-67.3-36.8-90.1c4-12.9,9.3-41.4-5.3-78C357.8,37.8,355.8,37.2,351.6,37.1L351.6,37.1z M266.6,174.3c17.6,0,32.6,3,43.9,14.8v0c14.1,14.8,22.4,32.7,22.4,52.1c0,90.1-58,92.6-129.5,92.6c-71.5,0-129.5-12.5-129.5-92.6c0-19.2,8.1-37,22.1-51.8c23.3-24.6,62.7-11.6,107.4-11.6C226.3,177.8,247.9,174.3,266.6,174.3L266.6,174.3z M133.4,200.8c-14.9,0-26.9,20.1-26.9,44.9c0,24.8,12.1,44.9,26.9,44.9c14.9,0,26.9-20.1,26.9-44.9C160.3,221,148.3,200.9,133.4,200.8L133.4,200.8z M277.9,200.8c-14.9,0-26.9,20.1-26.9,44.9c0,24.8,12.1,44.9,26.9,44.9c14.9,0,26.9-20.1,26.9-44.9C304.9,221,292.8,200.9,277.9,200.8L277.9,200.8z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="facebook">
                    <path d="M278.4,400V217.5h61.2l9.2-71.1h-70.4V101c0-20.6,5.7-34.6,35.2-34.6l37.7,0V2.8C344.8,1.9,322.5,0,296.5,0C242.2,0,205,33.1,205,94v52.4h-61.4v71.1H205V400H278.4z" class="shadow"></path>
                    <path d="M278.4,400V217.5h61.2l9.2-71.1h-70.4V101c0-20.6,5.7-34.6,35.2-34.6l37.7,0V2.8C344.8,1.9,322.5,0,296.5,0C242.2,0,205,33.1,205,94v52.4h-61.4v71.1H205V400H278.4z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="dribbble">
                    <path d="M200,0C89.7,0,0,89.7,0,200s89.7,200,200,200s200-89.7,200-200S310.3,0,200,0z M332.1,91c24.4,29.5,38.5,66.7,38.5,106.4c-2.6,0-60.3-12.8-119.2-5.1c-1.3-2.6-2.6-6.4-3.8-9c-3.8-9-7.7-16.7-11.5-24.4C303.8,132.1,332.1,92.3,332.1,91z M200,29.5c43.6,0,82.1,16.7,112.8,42.3c0,1.3-24.4,37.2-89.7,61.5c-29.5-53.8-61.5-96.2-64.1-100C173.1,30.8,185.9,29.5,200,29.5z M126.9,46.2c2.6,2.6,33.3,46.2,62.8,98.7c-82.1,21.8-152.6,20.5-157.7,20.5C43.6,111.5,79.5,67.9,126.9,46.2z M29.5,200c0-1.3,0-3.8,0-5.1c2.6,0,87.2,2.6,175.6-24.4c5.1,9,9,19.2,14.1,29.5c-2.6,0-3.8,1.3-6.4,2.6C120.5,232.1,74.4,315.4,74.4,315.4l0,0C46.2,283.3,29.5,243.6,29.5,200zM200,370.5c-39.7,0-75.6-14.1-105.1-35.9c0,0,33.3-71.8,133.3-106.4h1.3c24.4,62.8,33.3,114.1,35.9,129.5C246.2,365.4,223.1,370.5,200,370.5z M294.9,341c-1.3-10.3-10.3-60.3-33.3-121.8c55.1-9,102.6,6.4,106.4,7.7C361.5,274.4,333.3,315.4,294.9,341z"
                    class="shadow"></path>
                    <path d="M200,0C89.7,0,0,89.7,0,200s89.7,200,200,200s200-89.7,200-200S310.3,0,200,0z M332.1,91c24.4,29.5,38.5,66.7,38.5,106.4c-2.6,0-60.3-12.8-119.2-5.1c-1.3-2.6-2.6-6.4-3.8-9c-3.8-9-7.7-16.7-11.5-24.4C303.8,132.1,332.1,92.3,332.1,91z M200,29.5c43.6,0,82.1,16.7,112.8,42.3c0,1.3-24.4,37.2-89.7,61.5c-29.5-53.8-61.5-96.2-64.1-100C173.1,30.8,185.9,29.5,200,29.5z M126.9,46.2c2.6,2.6,33.3,46.2,62.8,98.7c-82.1,21.8-152.6,20.5-157.7,20.5C43.6,111.5,79.5,67.9,126.9,46.2z M29.5,200c0-1.3,0-3.8,0-5.1c2.6,0,87.2,2.6,175.6-24.4c5.1,9,9,19.2,14.1,29.5c-2.6,0-3.8,1.3-6.4,2.6C120.5,232.1,74.4,315.4,74.4,315.4l0,0C46.2,283.3,29.5,243.6,29.5,200zM200,370.5c-39.7,0-75.6-14.1-105.1-35.9c0,0,33.3-71.8,133.3-106.4h1.3c24.4,62.8,33.3,114.1,35.9,129.5C246.2,365.4,223.1,370.5,200,370.5z M294.9,341c-1.3-10.3-10.3-60.3-33.3-121.8c55.1-9,102.6,6.4,106.4,7.7C361.5,274.4,333.3,315.4,294.9,341z"></path>
                </g>
            </svg>
        </div>
    </a>
    <a href="#" target="_blank">
        <div class="icon">
            <svg viewBox="0 0 400 400">
                <g id="behance">
                    <path d="M161.4,186.6c0,0,37.9-2.8,37.9-47.2c0-44.4-31-66.1-70.2-66.1H56.9h-2.1H0v248.1h54.8h2.1h72.2c0,0,78.8,2.5,78.8-73.2C207.9,248.2,211.3,186.6,161.4,186.6z M119.8,117.4h9.3c0,0,17.5,0,17.5,25.8c0,25.8-10.3,29.5-22,29.5H56.9v-55.4L119.8,117.4L119.8,117.4z M125.4,277.3H56.9V211h72.2c0,0,26.2-0.3,26.2,34.1C155.2,274.1,135.7,277.1,125.4,277.3z M313,136.5c-95.4,0-95.3,95.3-95.3,95.3s-6.5,94.8,95.3,94.8c0,0,84.9,4.8,84.9-66h-43.7c0,0,1.5,26.7-39.8,26.7c0,0-43.7,2.9-43.7-43.2h128.5C399.3,244.1,413.4,136.5,313,136.5z M270.3,211c0,0,5.3-38.2,43.7-38.2c38.3,0,37.8,38.2,37.8,38.2H270.3z M362,118.5H259.6V87.9H362V118.5z"
                    class="shadow"></path>
                    <path d="M161.4,186.6c0,0,37.9-2.8,37.9-47.2c0-44.4-31-66.1-70.2-66.1H56.9h-2.1H0v248.1h54.8h2.1h72.2c0,0,78.8,2.5,78.8-73.2C207.9,248.2,211.3,186.6,161.4,186.6z M119.8,117.4h9.3c0,0,17.5,0,17.5,25.8c0,25.8-10.3,29.5-22,29.5H56.9v-55.4L119.8,117.4L119.8,117.4z M125.4,277.3H56.9V211h72.2c0,0,26.2-0.3,26.2,34.1C155.2,274.1,135.7,277.1,125.4,277.3z M313,136.5c-95.4,0-95.3,95.3-95.3,95.3s-6.5,94.8,95.3,94.8c0,0,84.9,4.8,84.9-66h-43.7c0,0,1.5,26.7-39.8,26.7c0,0-43.7,2.9-43.7-43.2h128.5C399.3,244.1,413.4,136.5,313,136.5z M270.3,211c0,0,5.3-38.2,43.7-38.2c38.3,0,37.8,38.2,37.8,38.2H270.3z M362,118.5H259.6V87.9H362V118.5z"></path>
                </g>
            </svg>
        </div>
    </a>
</main>

B. Social。使用SVG构造了国外主流社交媒体的矢量图标。

icon

编辑器支持Emmet

快捷键

B. Social。 使用SVG构造了国外主流社交媒体的矢量图标。

icon

一组SVG动画图标（电脑 | 轴承 | 钟表 | 笔尺 | 购物 | 办公）

15个纯CSS实现的响应式土豪金星球类应用动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

B. Social。使用SVG构造了国外主流社交媒体的矢量图标。