<h6 class="subtitle is-5 has-text-grey has-text-weight-semibold">Guidelines</h6><h1 class="title is-1 has-text-weight-bold">Iconography</h1>
<p class="subtitle is-5">
    <span class="has-text-weight-semibold">Iconography</span> uses symbols to represent an object or an action visually. They should be used sparingly to provide clarity and reduce cognitive load.
</p>

<hr class="is-large is-visible">

<h4 class="title is-4">Icons</h4>

Icons should **not be less than 24 pixels** (width and height).<br>Use, or make, an equivalent Glyph when displayed below 24px.

<br><br>

<div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey">
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-left"></use></svg></div>arrow-left</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-right"></use></svg></div>arrow-right</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-up"></use></svg></div>arrow-up</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#arrow-down"></use></svg></div>arrow-down</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#bell"></use></svg></div>bell</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-care"></use></svg></div>biings-care</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-claim"></use></svg></div>biings-claim</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings-pilot"></use></svg></div>biings-pilot</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#business"></use></svg></div>business</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#business-big"></use></svg></div>business-big</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#book"></use></svg></div>book</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#bubble"></use></svg></div>bubble</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#briefcase"></use></svg></div>briefcase</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#check"></use></svg></div>check</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#download"></use></svg></div>download</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#gear"></use></svg></div>gear</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#help"></use></svg></div>help</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#key"></use></svg></div>key</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#legal-proof"></use></svg></div>legal-proof</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#medical"></use></svg></div>medical</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#menu"></use></svg></div>menu</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#off"></use></svg></div>off</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#pen"></use></svg></div>pen</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#person"></use></svg></div>person</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#persons"></use></svg></div>persons</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#plus"></use></svg></div>plus</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#prefs"></use></svg></div>prefs</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#profile"></use></svg></div>profile</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search"></use></svg></div>search</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#search-list"></use></svg></div>search-list</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#settings"></use></svg></div>settings</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#timelines"></use></svg></div>timelines</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon is-medium has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#trash"></use></svg></div>trash</div>
</div>

<hr class="is-large is-visible">

<h4 class="title is-4">Glyphs</h4>

Glyphs should **not exceed 24 pixels** (width and height) and should always be a filled icon.<br>Fine stroke weights should also disappear.

<br><br>

<div class="columns is-multiline is-mobile is-size-7 has-text-centered has-text-weight-semibold is-monospace has-text-grey">
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#biings"></use></svg></div>biings</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#today"></use></svg></div>today</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#key_return"></use></svg></div>key_return</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#key_up_down"></use></svg></div>key_up_down</div>
    <div class="column is-one-third-mobile is-2 hover-to-black"><div class="box is-small"><svg class="icon has-fill-grey-darker"><use xlink:href="media/bds-icons.min.svg#segment"></use></svg></div>segment</div>
</div>
