Icons

​​​​​​​​​​​​​​​​​​​​​The icons below are allowed for site content. Please ensure you're following best practices and adhereing to accessibility guidelines.​ If you have any questions, please reach out to tatyana.warrick@wisconsin.gov or jeremiah.khang@tylertech.com

​Instructions for use: Copy the <i> code provided in the lists below and paste into the "Edit Source" of your page. 


Full Library​ | Arrows & Punctuation | Office Icons​ | People | Weather | Travel | Files ​


Full Icon Lib​​rary:​

  • : <i class="bi bi-airplane"></i>
  • : <i class="bi bi-archive"></i>
  • : <i class="bi bi-arrow-down-circle"></i>
  • : <i class="bi bi-arrow-down-left-circle"></i>
  • : <i class="bi bi-arrow-down-right-circle"></i>
  • : <i class="bi bi-arrow-left-circle"></i>
  • : <i class="bi bi-arrow-right-circle"></i>
  • : <i class="bi bi-arrow-up-circle"></i>
  • : <i class="bi bi-arrow-up-left-circle"></i>
  • : <i class="bi bi-arrow-up-right-circle"></i>
  • : <i class="bi bi-award"></i>
  • : <i class="bi bi-bank"></i>
  • : <i class="bi bi-bar-chart-line"></i>
  • : <i class="bi bi-bell"></i>
  • : <i class="bi bi-book"></i>
  • : <i class="bi bi-bookmarks"></i>
  • : <i class="bi bi-briefcase"></i>
  • : <i class="bi bi-brush"></i>
  • : <i class="bi bi-building"></i>
  • : <i class="bi bi-buildings"></i>
  • : <i class="bi bi-calendar-week"></i>
  • : <i class="bi bi-camera"></i>
  • : <i class="bi bi-car-front"></i>
  • : <i class="bi bi-card-checklist"></i>
  • : <i class="bi bi-image"></i>
  • : <i class="bi bi-card-text"></i>
  • : <i class="bi bi-chat-right-text"></i>
  • : <i class="bi bi-check-circle"></i>
  • : <i class="bi bi-clipboard-data"></i>
  • : <i class="bi bi-clock"></i>
  • : <i class="bi bi-cloud"></i>
  • : <i class="bi bi-coin"></i>
  • : <i class="bi bi-collection"></i>
  • : <i class="bi bi-columns-gap"></i>
  • : <i class="bi bi-credit-card"></i>
  • : <i class="bi bi-diagram-3"></i>
  • : <i class="bi bi-display"></i>
  • : <i class="bi bi-door-closed"></i>
  • : <i class="bi bi-door-open"></i>
  • : <i class="bi bi-droplet"></i>
  • : <i class="bi bi-easel2"></i>
  • : <i class="bi bi-envelope"></i>
  • : <i class="bi bi-magnet"></i>
  • : <i class="bi bi-mailbox"></i>
  • : <i class="bi bi-mic"></i>
  • : <i class="bi bi-mortarboard"></i>
  • : <i class="bi bi-mouse"></i>
  • : <i class="bi bi-newspaper"></i>
  • : <i class="bi bi-paint-bucket"></i>
  • : <i class="bi bi-envelope-open"></i>
  • : <i class="bi bi-exclamation-circle"></i>
  • : <i class="bi bi-eye"></i>
  • : <i class="bi bi-feather"></i>
  • : <i class="bi bi-file-earmark"></i>
  • : <i class="bi bi-file-earmark-check"></i>
  • : <i class="bi bi-file-earmark-bar-graph"></i>
  • : <i class="bi bi-file-earmark-text"></i>
  • : <i class="bi bi-file-earmark-image"></i>
  • : <i class="bi bi-file-earmark-check"></i>
  • : <i class="bi bi-fingerprint"></i>
  • : <i class="bi bi-fire"></i>
  • : <i class="bi bi-flag"></i>
  • : <i class="bi bi-folder2"></i>
  • : <i class="bi bi-folder2-open"></i>
  • : <i class="bi bi-gear-wide-connected"></i>
  • : <i class="bi bi-geo-alt"></i>
  • : <i class="bi bi-globe-americas"></i>
  • : <i class="bi bi-graph-up"></i>
  • : <i class="bi bi-grid-1x2"></i>
  • : <i class="bi bi-hand-index-thumb"></i>
  • : <i class="bi bi-headset"></i>
  • : <i class="bi bi-hourglass"></i>
  • : <i class="bi bi-house-door"></i>
  • : <i class="bi bi-images"></i>
  • : <i class="bi bi-inbox"></i>
  • : <i class="bi bi-info-circle"></i>
  • : <i class="bi bi-journal-bookmark"></i>
  • : <i class="bi bi-key"></i>
  • : <i class="bi bi-lightning-charge"></i>
  • : <i class="bi bi-link-45deg"></i>
  • : <i class="bi bi-palette"></i>
  • : <i class="bi bi-paperclip"></i>
  • : <i class="bi bi-passport"></i>
  • : <i class="bi bi-pen"></i>
  • : <i class="bi bi-pencil"></i>
  • : <i class="bi bi-people"></i>
  • : <i class="bi bi-person-circle"></i>
  • : <i class="bi bi-person-vcard"></i>
  • : <i class="bi bi-person-wheelchair"></i>
  • : <i class="bi bi-person-workspace"></i>
  • : <i class="bi bi-pie-chart"></i>
  • : <i class="bi bi-pin"></i>
  • : <i class="bi bi-play-circle"></i>
  • : <i class="bi bi-plus-circle"></i>
  • : <i class="bi bi-printer"></i>
  • : <i class="bi bi-question-circle"></i>
  • : <i class="bi bi-scissors"></i>
  • : <i class="bi bi-search"></i>
  • : <i class="bi bi-send"></i>
  • : <i class="bi bi-share"></i>
  • : <i class="bi bi-shield"></i>
  • : <i class="bi bi-shop"></i>
  • : <i class="bi bi-signpost"></i>
  • : <i class="bi bi-signpost-split"></i>
  • : <i class="bi bi-snow2"></i>
  • : <i class="bi bi-speedometer"></i>
  • : <i class="bi bi-sticky"></i>
  • : <i class="bi bi-stopwatch"></i>
  • : <i class="bi bi-suitcase"></i>
  • : <i class="bi bi-tag"></i>
  • : <i class="bi bi-tags"></i>
  • : <i class="bi bi-telephone"></i>
  • : <i class="bi bi-thermometer-half"></i>
  • : <i class="bi bi-tools"></i>
  • : <i class="bi bi-trash"></i>
  • : <i class="bi bi-tree"></i>
  • : <i class="bi bi-trophy"></i>
  • : <i class="bi bi-umbrella"></i>
  • : <i class="bi bi-lock"></i>
  • : <i class="bi bi-unlock"></i>
  • : <i class="bi bi-window"></i>
  • : <i class="bi bi-window-stack"></i>
  • : <i class="bi bi-x-circle"></i>
  • : <i class="bi bi-tsunami"></i>
  • : <i class="bi bi-cone-striped"></i>

Arrows & Punctuation

  • : <i class="bi bi-arrow-down-circle"></i>
  • : <i class="bi bi-arrow-down-left-circle"></i>
  • : <i class="bi bi-arrow-down-right-circle"></i>
  • : <i class="bi bi-arrow-left-circle"></i>
  • : <i class="bi bi-arrow-right-circle"></i>
  • : <i class="bi bi-arrow-up-circle"></i>
  • : <i class="bi bi-arrow-up-left-circle"></i>
  • : <i class="bi bi-arrow-up-right-circle"></i>
  • : <i class="bi bi-check-circle"></i>
  • : <i class="bi bi-exclamation-circle"></i>
  • : <i class="bi bi-info-circle"></i>
  • : <i class="bi bi-play-circle"></i>
  • : <i class="bi bi-plus-circle"></i>
  • : <i class="bi bi-question-circle"></i>
  • : <i class="bi bi-x-circle"></i>

​​

Common Office Icons​​

  • : <i class="bi bi-archive"></i>
  • : <i class="bi bi-award"></i>
  • : <i class="bi bi-bar-chart-line"></i>
  • : <i class="bi bi-bell"></i>
  • : <i class="bi bi-book"></i>
  • : <i class="bi bi-bookmarks"></i>
  • : <i class="bi bi-briefcase"></i>
  • : <i class="bi bi-brush"></i>
  • : <i class="bi bi-building"></i>
  • : <i class="bi bi-buildings"></i>
  • : <i class="bi bi-calendar-week"></i>
  • : <i class="bi bi-camera"></i>
  • : <i class="bi bi-card-checklist"></i>
  • : <i class="bi bi-image"></i>
  • : <i class="bi bi-card-text"></i>
  • : <i class="bi bi-clipboard-data"></i>
  • : <i class="bi bi-clock"></i>
  • : <i class="bi bi-collection"></i>
  • : <i class="bi bi-columns-gap"></i>
  • : <i class="bi bi-diagram-3"></i>
  • : <i class="bi bi-display"></i>
  • : <i class="bi bi-easel2"></i>
  • : <i class="bi bi-envelope"></i>
  • : <i class="bi bi-magnet"></i>
  • : <i class="bi bi-mailbox"></i>
  • : <i class="bi bi-mic"></i>
  • : <i class="bi bi-mouse"></i>
  • : <i class="bi bi-newspaper"></i>
  • : <i class="bi bi-paint-bucket"></i>
  • : <i class="bi bi-envelope-open"></i>
  • : <i class="bi bi-file-earmark"></i>
  • : <i class="bi bi-file-earmark-check"></i>
  • : <i class="bi bi-file-earmark-bar-graph"></i>
  • : <i class="bi bi-file-earmark-text"></i>
  • : <i class="bi bi-file-earmark-image"></i>
  • : <i class="bi bi-file-earmark-check"></i>
  • : <i class="bi bi-folder2"></i>
  • : <i class="bi bi-folder2-open"></i>
  • : <i class="bi bi-gear-wide-connected"></i>
  • : <i class="bi bi-geo-alt"></i>
  • : <i class="bi bi-globe-americas"></i>
  • : <i class="bi bi-graph-up"></i>
  • : <i class="bi bi-grid-1x2"></i>
  • : <i class="bi bi-headset"></i>
  • : <i class="bi bi-hourglass"></i>
  • : <i class="bi bi-images"></i>
  • : <i class="bi bi-inbox"></i>
  • : <i class="bi bi-journal-bookmark"></i>
  • : <i class="bi bi-key"></i>
  • : <i class="bi bi-link-45deg"></i>
  • : <i class="bi bi-paperclip"></i>
  • : <i class="bi bi-pen"></i>
  • : <i class="bi bi-pencil"></i>
  • : <i class="bi bi-people"></i>
  • : <i class="bi bi-person-circle"></i>
  • : <i class="bi bi-person-vcard"></i>
  • : <i class="bi bi-person-wheelchair"></i>
  • : <i class="bi bi-person-workspace"></i>
  • : <i class="bi bi-pie-chart"></i>
  • : <i class="bi bi-pin"></i>
  • : <i class="bi bi-printer"></i>
  • : <i class="bi bi-scissors"></i>
  • : <i class="bi bi-search"></i>
  • : <i class="bi bi-send"></i>
  • : <i class="bi bi-share"></i>
  • : <i class="bi bi-sticky"></i>
  • : <i class="bi bi-stopwatch"></i>
  • : <i class="bi bi-tag"></i>
  • : <i class="bi bi-tags"></i>
  • : <i class="bi bi-telephone"></i>
  • : <i class="bi bi-thermometer-half"></i>
  • : <i class="bi bi-tools"></i>
  • : <i class="bi bi-trash"></i>
  • : <i class="bi bi-trophy"></i>
  • : <i class="bi bi-lock"></i>
  • : <i class="bi bi-unlock"></i>
  • : <i class="bi bi-window"></i>
  • : <i class="bi bi-window-stack"></i>

​​

People

  • : <i class="bi bi-people"></i>
  • : <i class="bi bi-person-circle"></i>
  • : <i class="bi bi-person-vcard"></i>
  • : <i class="bi bi-person-wheelchair"></i>
  • : <i class="bi bi-person-workspace"></i>


Weather

  • : <i class="bi bi-cloud"></i>
  • : <i class="bi bi-droplet"></i>
  • : <i class="bi bi-fire"></i>
  • : <i class="bi bi-lightning-charge"></i>
  • : <i class="bi bi-snow2"></i>
  • : <i class="bi bi-thermometer-half"></i>
  • : <i class="bi bi-tree"></i>
  • : <i class="bi bi-umbrella"></i>
  • : <i class="bi bi-tsunami"></i>


Travel

  • : <i class="bi bi-airplane"></i>
  • : <i class="bi bi-bell"></i>
  • : <i class="bi bi-briefcase"></i>
  • : <i class="bi bi-geo-alt"></i>
  • : <i class="bi bi-globe-americas"></i>
  • : <i class="bi bi-info-circle"></i>
  • : <i class="bi bi-journal-bookmark"></i>
  • : <i class="bi bi-car-front"></i>
  • : <i class="bi bi-key"></i>
  • : <i class="bi bi-passport"></i>
  • : <i class="bi bi-signpost"></i>
  • : <i class="bi bi-signpost-split"></i>
  • : <i class="bi bi-speedometer"></i>
  • : <i class="bi bi-stopwatch"></i>
  • : <i class="bi bi-suitcase"></i>

​​
Files​

  • : <i class="bi bi-archive"></i>
  • : <i class="bi bi-book"></i>
  • : <i class="bi bi-bookmarks"></i>
  • : <i class="bi bi-card-checklist"></i>
  • : <i class="bi bi-image"></i>
  • : <i class="bi bi-card-text"></i>
  • : <i class="bi bi-clipboard-data"></i>
  • : <i class="bi bi-envelope"></i>
  • : <i class="bi bi-envelope-open"></i>
  • : <i class="bi bi-mailbox"></i>
  • : <i class="bi bi-newspaper"></i>
  • : <i class="bi bi-file-earmark"></i>
  • : <i class="bi bi-file-earmark-check"></i>
  • : <i class="bi bi-file-earmark-bar-graph"></i>
  • : <i class="bi bi-file-earmark-text"></i>
  • : <i class="bi bi-file-earmark-image"></i>
  • : <i class="bi bi-file-earmark-check"></i>
  • : <i class="bi bi-folder2"></i>
  • : <i class="bi bi-folder2-open"></i>
  • : <i class="bi bi-inbox"></i>
  • : <i class="bi bi-journal-bookmark"></i>
  • : <i class="bi bi-pen"></i>
  • : <i class="bi bi-pencil"></i>
  • : <i class="bi bi-printer"></i>
  • : <i class="bi bi-sticky"></i>
  • : <i class="bi bi-tag"></i>
  • : <i class="bi bi-tags"></i>