SVG
Last updated: 2020-05-04
Implementation
<svg class="menu_toggle_button"><use xlink:href="#navicon"></use></svg>
Change Fill Color
The example uses Javascript to dynamically change the fill color of the three line (hamburger) icon.
<svg style="display: none;">
<symbol id="navicon" viewBox="0 0 32 32">
<rect id="boundry_1" x="0" y="0" width="32" height="32" fill="none"></rect>
<path
id="btn_menu-hamburger"
fill="#000"
d="M25.5714531,22.4285684 C25.5714531,21.9598178 25.1830598,21.5714245 24.7143092,21.5714245 L5.85714388,21.5714245 C5.38839332,21.5714245 5,21.9598178 5,22.4285684 L5,24.1428561 C5,24.6116067 5.38839332,25 5.85714388,25 L24.7143092,25 C25.1830598,25 25.5714531,24.6116067 25.5714531,24.1428561 L25.5714531,22.4285684 Z M25.5714531,15.5714173 C25.5714531,15.1026668 25.1830598,14.7142735 24.7143092,14.7142735 L5.85714388,14.7142735 C5.38839332,14.7142735 5,15.1026668 5,15.5714173 L5,17.2857051 C5,17.7544556 5.38839332,18.142849 5.85714388,18.142849 L24.7143092,18.142849 C25.1830598,18.142849 25.5714531,17.7544556 25.5714531,17.2857051 L25.5714531,15.5714173 Z M25.5714531,8.7142663 C25.5714531,8.24551574 25.1830598,7.85712242 24.7143092,7.85712242 L5.85714388,7.85712242 C5.38839332,7.85712242 5,8.24551574 5,8.7142663 L5,10.4285541 C5,10.8973046 5.38839332,11.2856979 5.85714388,11.2856979 L24.7143092,11.2856979 C25.1830598,11.2856979 25.5714531,10.8973046 25.5714531,10.4285541 L25.5714531,8.7142663 Z"
></path>
</symbol>
</svg>
<svg class="menu_toggle_button"><use xlink:href="#navicon"></use></svg>
;(function () {
var icon = document.getElementById('btn_menu-hamburger')
icon.setAttribute('fill', '#990000')
})()
Change Icon With Javascript
Define the svg:
<svg style="display: none">
<symbol id="icon_info" viewBox="0 0 20 20">
<g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
<path
id="icon_info_icon"
fill="#558abb"
fill-rule="nonzero"
d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2 Z M13,17 L11,17 L11,11 L13,11 L13,17 Z M13,9 L11,9 L11,7 L13,7 L13,9 Z"
/>
<polygon points="0 0 24 0 24 24 0 24" />
</g>
</symbol>
<symbol id="icon_close" viewbox="0 0 20 20">
<g fill="none" fill-rule="evenodd" transform="translate(-2 -2)">
<path
id="icon_close_icon"
fill="#558abb"
fill-rule="nonzero"
d="M12,2 C6.47,2 2,6.47 2,12 C2,17.53 6.47,22 12,22 C17.53,22 22,17.53 22,12 C22,6.47 17.53,2 12,2 Z M17,15.59 L15.59,17 L12,13.41 L8.41,17 L7,15.59 L10.59,12 L7,8.41 L8.41,7 L12,10.59 L15.59,7 L17,8.41 L13.41,12 L17,15.59 Z"
/>
<polygon points="0 0 24 0 24 24 0 24" />
</g>
</symbol>
</svg>
Build the anchor:
<a href="#" class="btn_toggle"
><svg><use xlink:href="#icon_info"></use></svg
></a>
Toggle the icons onclick:
;(function () {
var info_buttons = document.querySelectorAll('.btn_toggle')
function toggleIcon() {
var use_icon = this.querySelector('svg > use')
var use_icon_xlink = use_icon.getAttribute('xlink:href')
use_icon.setAttribute('xlink:href', '#icon_close')
// use_icon.setAttribute('xlink:href', '#icon_info');
}
for (var i = 0; i < info_buttons.length; i++) {
info_buttons[i].addEventListener('click', toggleInfo, false)
}
})()
🐛 IE Bug
Switching the xlink:href value dynamically will cause IE to freeze. Implement this rule in the stylesheet to fix the bug.
svg use {
pointer-events: none;
}
Common SVG Icons
<svg style="display: none;">
<symbol id="navicon" viewBox="0 0 32 32">
<rect id="boundry_1" x="0" y="0" width="32" height="32" fill="none"></rect>
<path d="M25.5714531,22.4285684 C25.5714531,21.9598178 25.1830598,21.5714245 24.7143092,21.5714245 L5.85714388,21.5714245 C5.38839332,21.5714245 5,21.9598178 5,22.4285684 L5,24.1428561 C5,24.6116067 5.38839332,25 5.85714388,25 L24.7143092,25 C25.1830598,25 25.5714531,24.6116067 25.5714531,24.1428561 L25.5714531,22.4285684 Z M25.5714531,15.5714173 C25.5714531,15.1026668 25.1830598,14.7142735 24.7143092,14.7142735 L5.85714388,14.7142735 C5.38839332,14.7142735 5,15.1026668 5,15.5714173 L5,17.2857051 C5,17.7544556 5.38839332,18.142849 5.85714388,18.142849 L24.7143092,18.142849 C25.1830598,18.142849 25.5714531,17.7544556 25.5714531,17.2857051 L25.5714531,15.5714173 Z M25.5714531,8.7142663 C25.5714531,8.24551574 25.1830598,7.85712242 24.7143092,7.85712242 L5.85714388,7.85712242 C5.38839332,7.85712242 5,8.24551574 5,8.7142663 L5,10.4285541 C5,10.8973046 5.38839332,11.2856979 5.85714388,11.2856979 L24.7143092,11.2856979 C25.1830598,11.2856979 25.5714531,10.8973046 25.5714531,10.4285541 L25.5714531,8.7142663 Z" id="btn_menu-hamburger" fill="#fff"></path>
</symbol>
<symbol id="closeicon" viewBox="0 0 32 32">
<rect id="boundry_2" x="0" y="0" width="32" height="32" fill="none"></rect>
<path d="M23.9107333,20.8035867 C23.9107333,20.4687649 23.7768045,20.133943 23.5357328,19.8928713 L19.5982281,15.9553666 L23.5357328,12.0178619 C23.7768045,11.7767902 23.9107333,11.4419684 23.9107333,11.1071466 C23.9107333,10.7723247 23.7768045,10.4375029 23.5357328,10.1964312 L21.7143021,8.37500045 C21.4732303,8.13392873 21.1384085,8 20.8035867,8 C20.4687649,8 20.133943,8.13392873 19.8928713,8.37500045 L15.9553666,12.3125051 L12.0178619,8.37500045 C11.7767902,8.13392873 11.4419684,8 11.1071466,8 C10.7723247,8 10.4375029,8.13392873 10.1964312,8.37500045 L8.37500045,10.1964312 C8.13392873,10.4375029 8,10.7723247 8,11.1071466 C8,11.4419684 8.13392873,11.7767902 8.37500045,12.0178619 L12.3125051,15.9553666 L8.37500045,19.8928713 C8.13392873,20.133943 8,20.4687649 8,20.8035867 C8,21.1384085 8.13392873,21.4732303 8.37500045,21.7143021 L10.1964312,23.5357328 C10.4375029,23.7768045 10.7723247,23.9107333 11.1071466,23.9107333 C11.4419684,23.9107333 11.7767902,23.7768045 12.0178619,23.5357328 L15.9553666,19.5982281 L19.8928713,23.5357328 C20.133943,23.7768045 20.4687649,23.9107333 20.8035867,23.9107333 C21.1384085,23.9107333 21.4732303,23.7768045 21.7143021,23.5357328 L23.5357328,21.7143021 C23.7768045,21.4732303 23.9107333,21.1384085 23.9107333,20.8035867 Z" id="close_icon" fill="#fff"></path>
</symbol>
<symbol id="searchicon" viewBox="0 0 32 32">
<rect id="boundry_3" x="0" y="0" width="32" height="32" fill="none"></rect>
<path d="M20.0549606,14.9780315 C20.0549606,17.777142 17.777142,20.0549606 14.9780315,20.0549606 C12.178921,20.0549606 9.90110236,17.777142 9.90110236,14.9780315 C9.90110236,12.178921 12.178921,9.90110236 14.9780315,9.90110236 C17.777142,9.90110236 20.0549606,12.178921 20.0549606,14.9780315 Z M25.8571653,24.4066142 C25.8571653,24.0213115 25.6985113,23.6473413 25.4378654,23.3866954 L21.5508415,19.4996715 C22.4687684,18.1737771 22.956063,16.5872367 22.956063,14.9780315 C22.956063,10.5697158 19.3863472,7 14.9780315,7 C10.5697158,7 7,10.5697158 7,14.9780315 C7,19.3863472 10.5697158,22.956063 14.9780315,22.956063 C16.5872367,22.956063 18.1737771,22.4687684 19.4996715,21.5508415 L23.3866954,25.426533 C23.6473413,25.6985113 24.0213115,25.8571653 24.4066142,25.8571653 C25.1998843,25.8571653 25.8571653,25.1998843 25.8571653,24.4066142 Z" id="search_icon" fill="#fff"></path>
</symbol>
<symbol id="gridicon" viewbox="0 0 24 24">
<g id="ic_view_grid_black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect x="0" y="0" width="24" height="24"></rect>
<g id="gridicon_icon" fill="#000">
<rect id="Rectangle" x="0" y="0" width="6" height="6" rx="1"></rect>
<rect id="Rectangle" x="8" y="0" width="6" height="6" rx="1"></rect>
<rect id="Rectangle" x="0" y="8" width="6" height="6" rx="1"></rect>
<rect id="Rectangle" x="8" y="8" width="6" height="6" rx="1"></rect>
</g>
</g>
</symbol>
<symbol id="filtericon" viewbox="0 0 24 24">
<g id="ic_filter_list" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="BG" x="0" y="0" width="24" height="24"></rect>
<g id="filtericon_icon" fill="#000">
<rect id="bar" x="0" y="2" width="18" height="3" rx="1.5"></rect>
<rect id="bar" x="0" y="11" width="18" height="3" rx="1.5"></rect>
<circle id="Oval" cx="12.5" cy="3.5" r="3.5"></circle>
<circle id="Oval" cx="5.5" cy="12.5" r="3.5"></circle>
</g>
</g>
</symbol>
<symbol id="previousicon" viewBox="0 0 24 24">
<g id="ic_navigate_previous_black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon fill="#6B6175" points="15.41 7.41 14 6 8 12 14 18 15.41 16.59 10.83 12"></polygon>
<polygon points="0 0 24 0 24 24 0 24"></polygon>
</g>
</symbol>
<symbol id="nexticon" viewBox="0 0 24 24">
<g id="ic_navigate_next_black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon fill="#6B6175" points="10 6 8.59 7.41 13.17 12 8.59 16.59 10 18 16 12"></polygon>
<polygon points="0 0 24 0 24 24 0 24"></polygon>
</g>
</symbol>
<symbol id="rating_5_5" viewBox="0 0 110 21">
<g>
<g fill="#FAC800">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(22.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(44.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(66.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(88.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
</g>
</symbol>
<symbol id="rating_4_5" viewBox="0 0 110 21">
<g>
<g fill="#FAC800">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(22.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(44.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(66.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(88.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
</g>
</symbol>
<symbol id="rating_3_5" viewBox="0 0 110 21">
<g>
<g fill="#FAC800">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(22.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(44.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(66.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(88.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
</g>
</symbol>
<symbol id="rating_2_5" viewBox="0 0 110 21">
<g>
<g fill="#FAC800">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#FAC800" transform="translate(22.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(44.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(66.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(88.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
</g>
</symbol>
<symbol id="rating_1_5" viewBox="0 0 110 21">
<g>
<g fill="#FAC800">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(22.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(44.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(66.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(88.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
</g>
</symbol>
<symbol id="rating_0_5" viewBox="0 0 110 21">
<g>
<g fill="#D1CACA">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(22.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(44.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(66.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
<g fill="#D1CACA" transform="translate(88.000000, 0.000000)">
<polygon points="10.6666667 15.6444444 17.2622222 20.4444444 14.7377778 12.6933333 21.3333333 8 13.2444444 8 10.6666667 0 8.08888889 8 0 8 6.59555556 12.6933333 4.07111111 20.4444444"></polygon>
</g>
</g>
</symbol>
<symbol id="listicon" viewbox="0 0 24 24">
<g id="ic_view_list_black" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g>
<g fill="#000">
<rect x="0" y="0" width="4" height="4" rx="1"></rect>
<rect x="0" y="5" width="4" height="4" rx="1"></rect>
<rect x="0" y="10" width="4" height="4" rx="1"></rect>
<rect x="5" y="0" width="12" height="4" rx="1"></rect>
<rect x="5" y="5" width="12" height="4" rx="1"></rect>
<rect x="5" y="10" width="12" height="4" rx="1"></rect>
</g>
<polygon id="Shape" points="0 0 24 0 24 24 0 24"></polygon>
</g>
</g>
</symbol>
</svg>