Skip to main content

Manage icon symbols

By sliding in the Icon, you can copy the Icon code, edit the Icon content, download a single Icon, and delete the Icon.

Icon symbol list

1. Add icon symbols​

We provide uploading through SVG. If you need to transfer SVG Symbols, you can choose SVG Symbols to upload.

Suggestion

Because the SVG generated by some design software will add some redundant nodes, such as id, style, etc., so when you upload the SVG, we will only retain the basic attributes to save file capacity and improve loading performance.

If you really need those extra properties, you can edit them manually

Icon symbols add

1.1. Upload using SVG images​

For example, content like this

Icon symbols sample svg 
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
    <path d="M955.904 858.112z" fill="#0a66c2"/>
    <path d="M312.832 63.488H75.264C33.792 63.488 0 97.28 0 138.752v237.568c0 41.472 33.792 75.264 75.264 75.264h237.568c41.472 0 75.264-33.792 75.264-75.264V138.752c0-41.472-33.792-75.264-75.264-75.264zM305.152 368.64H82.944V146.432h222.72V368.64zM312.832 572.416H75.264c-41.472 0-75.264 33.792-75.264 75.264v237.568c0 41.472 33.792 75.264 75.264 75.264h237.568c41.472 0 75.264-33.792 75.264-75.264v-237.568c0-41.472-33.792-75.264-75.264-75.264z m-7.68 305.152H82.944v-222.72h222.72v222.72zM518.144 169.984c2.048 1.024 4.608 1.536 6.656 1.536H982.528c2.048 0 4.096-0.512 6.144-1.024 18.944-4.096 32.768-20.48 32.768-39.936 0-18.944-13.312-35.328-31.744-39.936-2.048-1.024-4.608-1.536-7.168-1.536h-457.728c-2.56 0-5.12 0.512-7.168 2.048-17.92 4.608-31.232 20.992-31.232 39.424 0 18.432 13.312 35.328 31.744 39.424zM516.608 398.336c2.56 1.536 5.12 2.048 7.68 2.048h457.728c2.56 0 4.608-0.512 7.168-1.536 18.432-4.608 31.744-20.992 31.744-39.936 0-19.456-13.824-35.84-32.768-39.936-2.048-0.512-4.096-1.024-6.144-1.024H524.288c-2.048 0-4.608 0.512-6.656 1.536-18.432 4.608-31.744 20.992-31.744 39.936 0.512 17.92 13.312 34.304 30.72 38.912zM517.12 704c2.56 1.536 5.12 2.048 7.68 2.048h457.728c1.024 0 2.048 0 3.072-0.512 21.504-1.536 38.4-19.456 38.4-40.96 0-22.528-18.432-41.472-41.472-41.472H524.8c-2.048 0-4.608 0.512-6.656 1.536-18.432 4.608-31.744 20.992-31.744 39.936 0 18.432 12.8 34.304 30.72 39.424zM986.624 827.392c-1.536-0.512-2.56-0.512-4.096-0.512h-457.728c-2.56 0-5.12 0.512-7.68 2.048-17.92 4.608-30.72 20.992-30.72 39.424 0 18.944 13.312 35.328 32.256 39.936 2.048 1.024 4.096 1.024 6.144 1.024h454.656c1.024 0 2.048 0.512 3.072 0.512 22.528 0 41.472-18.432 41.472-41.472 0-20.992-16.384-38.912-37.376-40.96z"/>
</svg>

Drag the file into the box to upload it

1.2. Upload using SVG Symbols​

For example, content like this

Icon symbols sample symbols 
export type TIconCode = 'add_members'|'adjustment';
export enum EIconCode {
  'add_members'='add_members',
  'adjustment'='adjustment',
}

const SvgSymbol = (
    <svg xmlns="http://www.w3.org/2000/svg" style={{display: 'none'}}>
        <symbol id="icon_add_members" viewBox="0 0 1024 1024">
            <path d="M856.143503 793.20045l-99.048877 0 0 102.337783-99.044784 0L658.049842 793.20045l-99.048877 0L559.000965 690.817642l99.048877 0L658.049842 588.480882l99.044784 0 0 102.33676 99.044784 0 0 102.382808L856.143503 793.20045 856.143503 793.20045zM459.937762 793.20045c0 17.482163 2.296299 34.413787 5.004991 51.144844L163.304831 844.345294c-0.364297-6.918573-0.485047-13.95278-0.485047-20.918425 0-210.640418 133.046179-381.345288 297.117978-381.345288 64.918545 0 124.501572 27.420513 173.346023 72.736605C531.191596 563.43137 459.937762 669.443845 459.937762 793.20045L459.937762 793.20045 459.937762 793.20045zM462.718085 402.857231c-82.84687 0-149.972687-61.58973-149.972687-137.495514 0-75.881225 67.125817-137.444349 149.972687-137.444349 82.839707 0 150.014642 61.563124 150.014642 137.444349C612.732727 341.267501 545.557792 402.857231 462.718085 402.857231L462.718085 402.857231 462.718085 402.857231zM462.718085 402.857231"/>
        </symbol>
        <symbol id="icon_adjustment" viewBox="0 0 1024 1024">
            <path d="M424.10937473 424.10937473v70.31250054h-70.31249973v-70.31250054h-70.31249973v-70.31249973h70.31249973v-70.31249973h70.31249973v70.31249973h70.31250054v70.31249973h-70.31250054zM881.140625 142.859375v738.28125H142.859375V142.859375h738.28125zM213.17187473 810.82812527L810.82812527 213.17187473H213.17187473v597.65625054z m351.56250027-193.35937527v70.31249973h175.78124973v-70.31249973H564.734375z"/>
        </symbol>
    </svg>);

export default SvgSymbol;

Drag the file into the box to upload it

2. Edit icon symbols​

You can edit the svg encoding content by yourself through the editing function and preview it from the right side

Icon symbol profile