City of Helsinki brand identity icon set.
npm install hel-icons
you only need hel-icons.svg file.
Insert icon in inline content.
<svg aria-hidden="true" class="icon"><use xlink:href="path-to/dist/symbol/svg/hel-icons.svg#book"></use></svg>
To make sure icons appear correct size depending on context include this default to styles
<style>
.icon {
width:1em;
height:1em
}
</style>
When icon is used for decoration or emphasis it should be hidden from screen readers with aria-hidden=true
When the icon is used without explanatory text as purely visual cue in UI you should provide a screen reader -friendly aria-label. In interactive elements this should be included in the wrapping <a> or <button> element.
<a href="/news/" aria-label="Latest News">
<svg aria-hidden="true">
<use xlink:href="path-to/dist/symbol/svg/hel-icons.svg#book"></use>
</svg>
</a>
When icon is not wrapped in interactive element, svg title can be used.
<svg>
<title>Book</title>
<use xlink:href="path-to/dist/symbol/svg/hel-icons.svg#book"></use>
</svg>
This spritemap displays fine in Chrome, Safari 7.1+, Firefox, and Opera.
For extended browser support (Safari 6, IE 6+, and Edge 12) you should use svg4everybody.
Clone the repository.
Install dependencies.
npm install
Add new svg files in src/svg/. For icon naming try to follow Font Awesome naming practices.
Compile svg sprite file.
grunt dev
View the test page on your browser in http://localhost:9090