BX Swiss Component Library

Icon: Medium

Icons can be displayed in three sizes, small (default), medium and large.

Small icons are most prevalent, but in some cases larger icons are needed and can be used.

<ul class="unstyled">
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#bx-swiss"></use>
	</svg> bx-swiss</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#back-arrow"></use>
	</svg> back-arrow</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#forward-arrow"></use>
	</svg> forward-arrow</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#up"></use>
	</svg> up</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#down"></use>
	</svg> down</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#collapse"></use>
	</svg> collapse</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#expand"></use>
	</svg> expand</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#download"></use>
	</svg> download</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#link"></use>
	</svg> link</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#graph"></use>
	</svg> graph</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#bar-graph"></use>
	</svg> bar-graph</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#trend"></use>
	</svg> trend</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#building"></use>
	</svg> building</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#clipboard"></use>
	</svg> clipboard</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#paper-sheets"></use>
	</svg> paper-sheets</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#news"></use>
	</svg> news</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#dashboard"></use>
	</svg> dashboard</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#info"></use>
	</svg> info</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#list"></use>
	</svg> list</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#menu"></use>
	</svg> menu</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#plus"></use>
	</svg> plus</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#minus"></use>
	</svg> minus</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#close"></use>
	</svg> close</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#edit"></use>
	</svg> edit</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#search"></use>
	</svg> search</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#no-search"></use>
	</svg> no-search</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#follow"></use>
	</svg> follow</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#unfollow"></use>
	</svg> unfollow</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#phone"></use>
	</svg> phone</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#profile"></use>
	</svg> profile</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#suspended"></use>
	</svg> suspended</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#time"></use>
	</svg> time</li>
    <li style="padding: 4px 0"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#moon"></use>
	</svg> moon</li>
</ul>
 
<ul class="unstyled">
	{{#each icons}}
		<li style="padding: 4px 0">{{{icon this size=../modifier}}} {{this}}</li>
	{{/each}}
</ul>
 
{
  "icons": [
    "bx-swiss",
    "back-arrow",
    "forward-arrow",
    "up",
    "down",
    "collapse",
    "expand",
    "download",
    "link",
    "graph",
    "bar-graph",
    "trend",
    "building",
    "clipboard",
    "paper-sheets",
    "news",
    "dashboard",
    "info",
    "list",
    "menu",
    "plus",
    "minus",
    "close",
    "edit",
    "search",
    "no-search",
    "follow",
    "unfollow",
    "phone",
    "profile",
    "suspended",
    "time",
    "moon"
  ],
  "modifier": "m"
}