Skip to content

Instantly share code, notes, and snippets.

@tnhu

tnhu/icons.css

Created October 19, 2017 18:16
Show Gist options
  • Save tnhu/dd03736a0685f126aacbffe0c445c8e7 to your computer and use it in GitHub Desktop.
Save tnhu/dd03736a0685f126aacbffe0c445c8e7 to your computer and use it in GitHub Desktop.
Download ZIP
icons.css
Raw
icons.css
:root {
--icon-pending: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="SUCCESS_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23DBDCDD;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;} </style> <g id="Ellipse_524"> <g> <circle class="st0" cx="8" cy="8" r="8"/> </g> </g> <g id="Ellipse_1551"> <g> <circle class="st1" cx="8" cy="8" r="6"/> </g> </g> </svg>');
--icon-queued: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="QUE_1_copy_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> <style type="text/css"> .st0{fill:#E1E4E5;} .st1{fill:#FFFFFF;} .st2{fill:#C3C8CA;} </style> <g id="Ellipse_524"> <g> <circle class="st0" cx="8" cy="8" r="8"/> </g> </g> <g id="Ellipse_1554"> <g> <circle class="st1" cx="8" cy="8" r="6"/> </g> </g> <g id="Q"> <g> <path class="st2" d="M11.4,10.8l-0.7,0.9L9.9,11c-0.6,0.4-1.2,0.6-2,0.6c-2,0-3.4-1.6-3.4-3.6c0-1.9,1.4-3.6,3.4-3.6 S11.4,6,11.4,8c0,0.8-0.2,1.5-0.7,2.1L11.4,10.8z M7.9,9.1l0.7-0.9l1.1,1.1c0.2-0.4,0.3-0.8,0.3-1.3c0-1.3-0.9-2.5-2.2-2.5 C6.6,5.5,5.8,6.6,5.8,8s0.9,2.5,2.2,2.5c0.4,0,0.8-0.1,1.1-0.3L7.9,9.1z"/> </g> </g> </svg>');
--icon-success: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="SUCCESS_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23A8EAB7;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;} .st2{fill-rule:evenodd;clip-rule:evenodd;fill:%233DCC5F;} </style> <g id="Ellipse_524"> <g> <circle class="st0" cx="8" cy="8" r="8"/> </g> </g> <g id="Ellipse_1551"> <g> <circle class="st1" cx="8" cy="8" r="6"/> </g> </g> <g id="Rectangle_772_copy"> <g> <polygon class="st2" points="11.6,5.9 10.4,4.7 6.4,8.7 5.1,7.4 3.9,8.5 5.2,9.9 5.2,9.9 6.4,11.1 6.4,11.1 6.4,11.1 7.6,9.9 7.6,9.9"/> </g> </g> </svg>');
--icon-failed: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="FAILED_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23F7ACB3;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;} .st2{fill:%23E94F60;}</style><g id="Ellipse_524"><g><circle class="st0" cx="8" cy="8" r="8"/></g></g><g id="Ellipse_1550"><g><circle class="st1" cx="8" cy="8" r="6"/></g></g><g id="_x21_"><path class="st2" d="M7,11c0-0.6,0.4-1.1,1-1.1s1,0.5,1,1.1c0,0.6-0.4,1.1-1,1.1S7,11.6,7,11z M7.3,5.8L7.2,4.3h1.7L8.9,5.8L8.6,9.3H7.5L7.3,5.8z"/></g></svg>');
--icon-aborted: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="ABORTED_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23CACFD1;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;} .st2{fill-rule:evenodd;clip-rule:evenodd;fill:%23A1A6A9;} </style> <g id="Ellipse_524"><g><circle class="st0" cx="8" cy="8" r="8"/> </g> </g> <g id="Ellipse_1552"> <g> <circle class="st1" cx="8" cy="8" r="6"/> </g> </g> <g id="Rectangle_769_copy"> <g> <polygon class="st2" points="11.1,5.6 10.4,4.9 8,7.3 5.6,4.9 4.9,5.6 7.3,8 5,10.3 5.7,11 8,8.7 10.3,11 11,10.3 8.7,8"/></g></g></svg>');
--icon-running: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="RUNNING_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%237DDBDF;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;} .st2{fill-rule:evenodd;clip-rule:evenodd;fill:%230DC0C9;}</style><g id="Ellipse_524_copy"><g><circle class="st0" cx="8" cy="8" r="8"/> </g> </g> <g id="Ellipse_1552"><g><circle class="st1" cx="8" cy="8" r="6"/> </g> </g> <g id="Rectangle_766"> <g> <polygon class="st2" points="8.5,7.4 8.5,3.4 7.2,3.4 7.2,8.8 11.8,8.8 11.8,7.4"/></g></g></svg>');
--icon-paused: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="PAUSED_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFE38D;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;} .st2{fill-rule:evenodd;clip-rule:evenodd;fill:%23FEBF01;} </style> <g id="Ellipse_524"> <g> <circle class="st0" cx="8" cy="8" r="8"/> </g> </g> <g id="Ellipse_1554"> <g> <circle class="st1" cx="8" cy="8" r="6"/> </g> </g> <g id="Rectangle_767"> <g> <rect x="6" y="5.5" class="st2" width="1.5" height="5"/> </g> </g> <g id="Rectangle_768"> <g> <rect x="8.5" y="5.5" class="st2" width="1.5" height="5"/></g></g></svg>');
--icon-bracket-left: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Rectangle_3264_copy_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 32" style="enable-background:new 0 0 8 32;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23C3C8CA;} </style> <g id="Rectangle_3264_copy"><g><polygon class="st0" points="2,2 8,2 8,0 0,0 0,32 8,32 8,30 2,30"/></g></g></svg>');
--icon-bracket-right: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Rectangle_3264_copy_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 8 32" style="enable-background:new 0 0 8 32;" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%23C3C8CA;}</style><g id="Rectangle_3264_copy"><g><polygon class="st0" points="0,0 0,2 6,2 6,30 0,30 0,32 8,32 8,0"/></g></g></svg>');
--icon-add: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 26 26" style="enable-background:new 0 0 26 26;" xml:space="preserve"> <style type="text/css"> .st0{enable-background:new ;} .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0dc0c9;} .st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;} </style> <g id="Ellipse_5_1_" class="st0"> <g id="Ellipse_5"> <g> <circle class="st1" cx="13" cy="13" r="13"/> </g> </g> </g> <g id="Rectangle_1407_1_" class="st0"> <g id="Rectangle_1407"> <g> <polygon class="st2" points="18,12 14,12 14,8 12,8 12,12 8,12 8,14 12,14 12,18 14,18 14,14 18,14"/> </g> </g> </g> </svg>');
--icon-next: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" fill="%23b6b8ba"><g id="surface1" fill="%23b6b8ba"><path style=" " d="M 12.96875 4.28125 L 11.53125 5.71875 L 21.8125 16 L 11.53125 26.28125 L 12.96875 27.71875 L 23.96875 16.71875 L 24.65625 16 L 23.96875 15.28125 Z " fill="%23b6b8ba"/></g></svg>');
--icon-next-hover: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" fill="%2300ADE4"><g id="surface1" fill="%2300ADE4"><path style=" " d="M 12.96875 4.28125 L 11.53125 5.71875 L 21.8125 16 L 11.53125 26.28125 L 12.96875 27.71875 L 23.96875 16.71875 L 24.65625 16 L 23.96875 15.28125 Z " fill="%2300ADE4"/></g></svg>');
--icon-prev: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" fill="%23b6b8ba"><g id="surface1" fill="%23b6b8ba"><path style=" " d="M 19.03125 4.28125 L 8.03125 15.28125 L 7.34375 16 L 8.03125 16.71875 L 19.03125 27.71875 L 20.46875 26.28125 L 10.1875 16 L 20.46875 5.71875 Z " fill="%23b6b8ba"/></g></svg>');
--icon-prev-hover: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" version="1.1" fill="%2300ADE4"><g id="surface1" fill="%2300ADE4"><path style=" " d="M 19.03125 4.28125 L 8.03125 15.28125 L 7.34375 16 L 8.03125 16.71875 L 19.03125 27.71875 L 20.46875 26.28125 L 10.1875 16 L 20.46875 5.71875 Z " fill="%2300ADE4"/></g></svg>');
--icon-plus: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Rectangle_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 13 13" style="enable-background:new 0 0 13 13;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0dc0c9;} </style> <g id="Rectangle_2"> <g> <polygon class="st0" points="13,6 7,6 7,0 6,0 6,6 0,6 0,7 6,7 6,13 7,13 7,7 13,7"/> </g> </g> </svg>');
--icon-pencil: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 13 13" style="enable-background:new 0 0 13 13;" xml:space="preserve"> <style type="text/css"> .st0{clip-path:url(#SVGID_2_);} </style> <g> <g> <defs> <rect id="SVGID_1_" x="0" y="0" width="13" height="13"/> </defs> <clipPath id="SVGID_2_"> <use xlink:href="#SVGID_1_" style="overflow:visible;"/></clipPath><path class="st0" d="M0.8,12.5c-0.1,0-0.1,0-0.2-0.1c-0.1-0.1-0.1-0.2-0.1-0.3l1.8-4.7c0,0,0-0.1,0.1-0.1l6.8-6.8 c0.1-0.1,0.3-0.1,0.4,0s0.1,0.3,0,0.4L3.3,7.2C3.4,7.4,3.5,7.7,3.5,8c0.4-0.1,1-0.2,1.3,0.2C5.2,8.6,5.2,9.1,5,9.5 c0.4,0,0.6,0.1,0.8,0.2L12,3.5c0.1-0.1,0.3-0.1,0.4,0c0.1,0.1,0.1,0.3,0,0.4l-6.3,6.3c0,0,0,0,0,0c0,0,0,0,0,0l-0.4,0.4 c0,0-0.1,0-0.1,0.1L0.8,12.5C0.8,12.5,0.8,12.5,0.8,12.5z M2.8,7.7l-1.5,4.1l4.1-1.5l0.1-0.1C5.3,10,5,10,4.7,10.1 c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.2,0-0.3c0.1-0.2,0.4-0.9,0.1-1.2c-0.3-0.3-1,0-1.2,0.1C3.2,8.7,3.1,8.7,3,8.7 C2.9,8.6,2.8,8.5,2.9,8.4C3,8.1,3,7.8,2.9,7.6L2.8,7.7z"/> </g> <polyline points="1.5,10.4 2.6,11.5 0.8,12.2 "/> </g> </svg>');
--icon-delete: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Rectangle_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 13 13" style="enable-background:new 0 0 13 13;" xml:space="preserve"> <style type="text/css"> .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#EE3424;} </style> <g id="Rectangle_2"> <g> <polygon class="st0" points="13,0.9 12.1,0 6.5,5.6 0.9,0 0,0.9 5.6,6.5 0,12.1 0.9,13 6.5,7.4 12.1,13 13,12.1 7.4,6.5"/></g></g></svg>');
--icon-approval: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 792" style="enable-background:new 0 0 612 792;" xml:space="preserve"><g><path d="M219.6,5C136.9,5,69.4,72.5,69.4,155.3c0,51.7,26.4,97.7,66.4,124.8C59.2,312.9,5,388.8,5,477.2h42.9 c0-95.1,76.6-171.7,171.7-171.7c29.5,0,57,7.7,81.2,20.8c-23.8,29.5-38.2,67.2-38.2,108c0,94.6,77.1,171.7,171.7,171.7 c94.6,0,171.7-77.1,171.7-171.7s-77.1-171.7-171.7-171.7c-37.5,0-72.4,12.3-100.6,32.9c-9.5-6-19.8-11-30.2-15.4 c40-27.1,66.4-73,66.4-124.8C369.9,72.5,302.4,5,219.6,5L219.6,5z M219.6,47.9c59.5,0,107.3,47.8,107.3,107.3 s-47.8,107.3-107.3,107.3c-59.5,0-107.3-47.8-107.3-107.3C112.3,95.7,160.1,47.9,219.6,47.9L219.6,47.9z M434.3,305.5 c71.3,0,128.8,57.4,128.8,128.8s-57.4,128.8-128.8,128.8c-71.3,0-128.8-57.4-128.8-128.8S362.9,305.5,434.3,305.5L434.3,305.5z M412.8,348.4v64.4h-64.4v42.9h64.4v64.4h42.9v-64.4h64.4v-42.9h-64.4v-64.4H412.8z"/></g></svg>');
--icon-execute: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve"><circle fill="#0dc0c9" cx="24" cy="24" r="20"></circle><polygon fill="#FFFFFF" points="17,33 17,15 35,24 "></polygon></svg>');
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment