{/* Iconography.stories.mdx */}

import { Meta } from "@storybook/addon-docs";

<Meta title="Documentation/Icons" />

# Iconography

Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must
be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide
the text to screen readers, and a `title` attribute to provide the text visually through a tool tip.
Note: this pattern should only be followed for very common iconography such as, a settings cog icon
or an options menu icon.

## Status Indicators

| Icon                                         | bwi-name                 | Usage                                                                                                                                                                                     |
| -------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <i class="bwi bwi-ban"></i>                  | bwi-ban                  | option or feature not available. Example: send maximum access count was reached                                                                                                           |
| <i class="bwi bwi-check"></i>                | bwi-check                | confirmation action (Example: "confirm member"), successful confirmation (toast or callout), or shows currently selected option in a menu. Use with success color variable if applicable. |
| <i class="bwi bwi-error"></i>                | bwi-error                | error; used in form field error states and error toasts, banners, and callouts. Do not use as a close or clear icon. Use with danger color variable.                                      |
| <i class="bwi bwi-exclamation-circle"></i>   | bwi-exclamation-circle   | deprecated error icon; use bwi-error                                                                                                                                                      |
| <i class="bwi bwi-exclamation-triangle"></i> | bwi-exclamation-triangle | warning; used in warning callouts, banners, and toasts. Use with warning color variable.                                                                                                  |
| <i class="bwi bwi-info-circle"></i>          | bwi-info-circle          | information; used in info callouts, banners, and toasts. Use with info color variable.                                                                                                    |
| <i class="bwi bwi-question-circle"></i>      | bwi-question-circle      | link to help documentation or hover tooltip                                                                                                                                               |
| <i class="bwi bwi-spinner"></i>              | bwi-spinner              | loading                                                                                                                                                                                   |

## Bitwarden Objects

| Icon                                | bwi-name        | Usage                                               |
| ----------------------------------- | --------------- | --------------------------------------------------- |
| <i class="bwi bwi-business"></i>    | bwi-business    | organization or vault for Free, Teams or Enterprise |
| <i class="bwi bwi-collection"></i>  | bwi-collection  | collection                                          |
| <i class="bwi bwi-credit-card"></i> | bwi-credit-card | card item type                                      |
| <i class="bwi bwi-family"></i>      | bwi-family      | family vault or organization                        |
| <i class="bwi bwi-folder"></i>      | bwi-folder      | folder                                              |
| <i class="bwi bwi-globe"></i>       | bwi-globe       | login item type                                     |
| <i class="bwi bwi-id-card"></i>     | bwi-id-card     | identity item type                                  |
| <i class="bwi bwi-send"></i>        | bwi-send        | send action or feature                              |
| <i class="bwi bwi-send-f"></i>      | bwi-send-f      | -                                                   |
| <i class="bwi bwi-sticky-note"></i> | bwi-sticky-note | secure note item type                               |
| <i class="bwi bwi-users"></i>       | bwi-users       | user group                                          |
| <i class="bwi bwi-vault"></i>       | bwi-vault       | general vault                                       |

## Actions

| Icon                                  | bwi-name          | Usage                                        |
| ------------------------------------- | ----------------- | -------------------------------------------- |
| <i class="bwi bwi-check-circle"></i>  | bwi-check-circle  | check if password has been exposed           |
| <i class="bwi bwi-check-square"></i>  | bwi-check-square  | select all action                            |
| <i class="bwi bwi-clone"></i>         | bwi-clone         | copy to clipboard action                     |
| <i class="bwi bwi-close"></i>         | bwi-close         | close action                                 |
| <i class="bwi bwi-cog"></i>           | bwi-cog           | settings                                     |
| <i class="bwi bwi-cog-f"></i>         | bwi-cog-f         | settings                                     |
| <i class="bwi bwi-cogs"></i>          | bwi-cogs          | deprecated; do not use in app.               |
| <i class="bwi bwi-download"></i>      | bwi-download      | download or export                           |
| <i class="bwi bwi-envelope"></i>      | bwi-envelope      | action related to emailing a user            |
| <i class="bwi bwi-external-link"></i> | bwi-external-link | open in new window or popout                 |
| <i class="bwi bwi-eye"></i>           | bwi-eye           | show icon for password fields                |
| <i class="bwi bwi-eye-slash"></i>     | bwi-eye-slash     | hide icon for password fields                |
| <i class="bwi bwi-files"></i>         | bwi-files         | clone action / duplicate an item             |
| <i class="bwi bwi-generate"></i>      | bwi-generate      | generate action in edit item forms           |
| <i class="bwi bwi-generate-f"></i>    | bwi-generate-f    | generate feature or action                   |
| <i class="bwi bwi-lock"></i>          | bwi-lock          | lock vault action                            |
| <i class="bwi bwi-lock-f"></i>        | bwi-lock-f        | -                                            |
| <i class="bwi bwi-minus-circle"></i>  | bwi-minus-circle  | remove action                                |
| <i class="bwi bwi-minus-square"></i>  | bwi-minus-square  | unselect all action                          |
| <i class="bwi bwi-paste"></i>         | bwi-paste         | paste from clipboard action                  |
| <i class="bwi bwi-pencil-square"></i> | bwi-pencil-square | edit action                                  |
| <i class="bwi bwi-play"></i>          | bwi-play          | start or play action                         |
| <i class="bwi bwi-plus"></i>          | bwi-plus          | new or add option in contained buttons/links |
| <i class="bwi bwi-plus-circle"></i>   | bwi-plus-circle   | new or add option in text buttons/links      |
| <i class="bwi bwi-plus-square"></i>   | bwi-plus-square   | -                                            |
| <i class="bwi bwi-refresh"></i>       | bwi-refresh       | "re"-action; such as refresh or regenerate   |
| <i class="bwi bwi-refresh-tab"></i>   | bwi-refresh-tab   | -                                            |
| <i class="bwi bwi-save"></i>          | bwi-save          | alternate download action                    |
| <i class="bwi bwi-save-changes"></i>  | bwi-save-changes  | save changes action                          |
| <i class="bwi bwi-search"></i>        | bwi-search        | search action                                |
| <i class="bwi bwi-share"></i>         | bwi-share         | -                                            |
| <i class="bwi bwi-share-arrow"></i>   | bwi-share-arrow   | -                                            |
| <i class="bwi bwi-share-square"></i>  | bwi-share-square  | avoid using; use external-link instead       |
| <i class="bwi bwi-sign-in"></i>       | bwi-sign-in       | sign-in action                               |
| <i class="bwi bwi-sign-out"></i>      | bwi-sign-out      | sign-out action                              |
| <i class="bwi bwi-star"></i>          | bwi-star          | favorite action                              |
| <i class="bwi bwi-star-f"></i>        | bwi-star-f        | favorited / unfavorite action                |
| <i class="bwi bwi-stop"></i>          | bwi-stop          | stop action                                  |
| <i class="bwi bwi-trash"></i>         | bwi-trash         | delete action or trash area                  |
| <i class="bwi bwi-undo"></i>          | bwi-undo          | restore action                               |
| <i class="bwi bwi-unlock"></i>        | bwi-unlock        | unlocked                                     |

## Directional and Menu Indicators

| Icon                                       | bwi-name               | Usage                                                   |
| ------------------------------------------ | ---------------------- | ------------------------------------------------------- |
| <i class="bwi bwi-angle-down"></i>         | bwi-angle-down         | closed dropdown or open expandable section              |
| <i class="bwi bwi-angle-left"></i>         | bwi-angle-left         | -                                                       |
| <i class="bwi bwi-angle-right"></i>        | bwi-angle-right        | closed expandable section                               |
| <i class="bwi bwi-angle-up"></i>           | bwi-angle-up           | open dropdown                                           |
| <i class="bwi bwi-arrow-circle-down"></i>  | bwi-arrow-circle-down  | -                                                       |
| <i class="bwi bwi-arrow-circle-left"></i>  | bwi-arrow-circle-left  | -                                                       |
| <i class="bwi bwi-arrow-circle-right"></i> | bwi-arrow-circle-right | -                                                       |
| <i class="bwi bwi-arrow-circle-up"></i>    | bwi-arrow-circle-up    | -                                                       |
| <i class="bwi bwi-caret-down"></i>         | bwi-caret-down         | table sort order                                        |
| <i class="bwi bwi-caret-right"></i>        | bwi-caret-right        | -                                                       |
| <i class="bwi bwi-caret-up"></i>           | bwi-caret-up           | table sort order                                        |
| <i class="bwi bwi-dbl-angle-left"></i>     | bwi-dbl-angle-left     | -                                                       |
| <i class="bwi bwi-dbl-angle-right"></i>    | bwi-dbl-angle-right    | -                                                       |
| <i class="bwi bwi-down-solid"></i>         | bwi-down-solid         | table sort order                                        |
| <i class="bwi bwi-ellipsis-h"></i>         | bwi-ellipsis-h         | more options menu horizontal; used in mobile list items |
| <i class="bwi bwi-ellipsis-v"></i>         | bwi-ellipsis-v         | more options menu vertical; used primarily in tables    |
| <i class="bwi bwi-filter"></i>             | bwi-filter             | Product switcher                                        |
| <i class="bwi bwi-hamburger"></i>          | bwi-hamburger          | navigation indicator                                    |
| <i class="bwi bwi-list"></i>               | bwi-list               | toggle list/grid view                                   |
| <i class="bwi bwi-list-alt"></i>           | bwi-list-alt           | view item action in extension                           |
| <i class="bwi bwi-long-arrow-right"></i>   | bwi-long-arrow-right   | -                                                       |
| <i class="bwi bwi-numbered-list"></i>      | bwi-numbered-list      | toggle numbered list view                               |
| <i class="bwi bwi-up-down-btn"></i>        | bwi-up-down-btn        | table sort order                                        |
| <i class="bwi bwi-up-solid"></i>           | bwi-up-solid           | table sort order                                        |

## Misc Objects

| Icon                                      | bwi-name              | Usage                                          |
| ----------------------------------------- | --------------------- | ---------------------------------------------- |
| <i class="bwi bwi-bank"></i>              | bwi-bank              | -                                              |
| <i class="bwi bwi-billing"></i>           | bwi-billing           | billing options                                |
| <i class="bwi bwi-bitcoin"></i>           | bwi-bitcoin           | crypto                                         |
| <i class="bwi bwi-bolt"></i>              | bwi-bolt              | deprecated "danger" icon                       |
| <i class="bwi bwi-bookmark"></i>          | bwi-bookmark          | bookmark or save related actions               |
| <i class="bwi bwi-browser"></i>           | bwi-browser           | web browser                                    |
| <i class="bwi bwi-bug"></i>               | bwi-bug               | test or debug action                           |
| <i class="bwi bwi-camera"></i>            | bwi-camera            | actions related to camera use                  |
| <i class="bwi bwi-chain-broken"></i>      | bwi-chain-broken      | unlink action                                  |
| <i class="bwi bwi-chat"></i>              | bwi-chat              | -                                              |
| <i class="bwi bwi-cli"></i>               | bwi-cli               | cli client or code                             |
| <i class="bwi bwi-clock"></i>             | bwi-clock             | use for time based actions or views            |
| <i class="bwi bwi-community"></i>         | bwi-community         | -                                              |
| <i class="bwi bwi-cut"></i>               | bwi-cut               | cut or omit actions                            |
| <i class="bwi bwi-dashboard"></i>         | bwi-dashboard         | statuses or dashboard views                    |
| <i class="bwi bwi-desktop"></i>           | bwi-desktop           | desktop client                                 |
| <i class="bwi bwi-dollar"></i>            | bwi-dollar            | account credit                                 |
| <i class="bwi bwi-file"></i>              | bwi-file              | file related objects or actions                |
| <i class="bwi bwi-file-pdf"></i>          | bwi-file-pdf          | PDF related object or actions                  |
| <i class="bwi bwi-file-text"></i>         | bwi-file-text         | text related objects or actions                |
| <i class="bwi bwi-bw-folder-open-f1"></i> | bwi-bw-folder-open-f1 | -                                              |
| <i class="bwi bwi-folder-closed-f"></i>   | bwi-folder-closed-f   | -                                              |
| <i class="bwi bwi-folder-open"></i>       | bwi-folder-open       | -                                              |
| <i class="bwi bwi-frown"></i>             | bwi-frown             | -                                              |
| <i class="bwi bwi-hashtag"></i>           | bwi-hashtag           | link to specific id                            |
| <i class="bwi bwi-insurance"></i>         | bwi-insurance         | -                                              |
| <i class="bwi bwi-key"></i>               | bwi-key               | key or password related objects or actions     |
| <i class="bwi bwi-learning"></i>          | bwi-learning          | learning center                                |
| <i class="bwi bwi-lightbulb"></i>         | bwi-lightbulb         | -                                              |
| <i class="bwi bwi-link"></i>              | bwi-link              | link action                                    |
| <i class="bwi bwi-mobile"></i>            | bwi-mobile            | mobile client                                  |
| <i class="bwi bwi-money"></i>             | bwi-money             | -                                              |
| <i class="bwi bwi-paperclip"></i>         | bwi-paperclip         | attachments                                    |
| <i class="bwi bwi-pencil"></i>            | bwi-pencil            | editing                                        |
| <i class="bwi bwi-provider"></i>          | bwi-provider          | relates to provider or provider portal         |
| <i class="bwi bwi-providers"></i>         | bwi-providers         | -                                              |
| <i class="bwi bwi-puzzle"></i>            | bwi-puzzle            | -                                              |
| <i class="bwi bwi-rocket"></i>            | bwi-rocket            | -                                              |
| <i class="bwi bwi-rss"></i>               | bwi-rss               | -                                              |
| <i class="bwi bwi-search-book"></i>       | bwi-search-book       | -                                              |
| <i class="bwi bwi-server"></i>            | bwi-server            | -                                              |
| <i class="bwi bwi-shield"></i>            | bwi-shield            | -                                              |
| <i class="bwi bwi-sitemap"></i>           | bwi-sitemap           | -                                              |
| <i class="bwi bwi-sliders"></i>           | bwi-sliders           | reporting or filtering                         |
| <i class="bwi bwi-software-license"></i>  | bwi-software-license  | -                                              |
| <i class="bwi bwi-square"></i>            | bwi-square            | -                                              |
| <i class="bwi bwi-tag"></i>               | bwi-tag               | labels                                         |
| <i class="bwi bwi-thumb-tack"></i>        | bwi-thumb-tack        | -                                              |
| <i class="bwi bwi-thumbs-up"></i>         | bwi-thumbs-up         | -                                              |
| <i class="bwi bwi-universal-access"></i>  | bwi-universal-access  | use for accessibility related actions          |
| <i class="bwi bwi-user"></i>              | bwi-user              | relates to current user or organization member |
| <i class="bwi bwi-user-circle"></i>       | bwi-user-circle       | -                                              |
| <i class="bwi bwi-user-f"></i>            | bwi-user-f            | -                                              |
| <i class="bwi bwi-wireless"></i>          | bwi-wireless          | -                                              |
| <i class="bwi bwi-wrench"></i>            | bwi-wrench            | tools or additional configuration options      |

## Platforms and Logos

| Icon                              | bwi-name      | Usage                        |
| --------------------------------- | ------------- | ---------------------------- |
| <i class="bwi bwi-android"></i>   | bwi-android   | android support              |
| <i class="bwi bwi-apple"></i>     | bwi-apple     | apple/IOS support            |
| <i class="bwi bwi-chrome"></i>    | bwi-chrome    | chrome support               |
| <i class="bwi bwi-discourse"></i> | bwi-discourse | community forum              |
| <i class="bwi bwi-edge"></i>      | bwi-edge      | edge support                 |
| <i class="bwi bwi-facebook"></i>  | bwi-facebook  | link to our facebook page    |
| <i class="bwi bwi-firefox"></i>   | bwi-firefox   | support for firefox          |
| <i class="bwi bwi-github"></i>    | bwi-github    | link to our github page      |
| <i class="bwi bwi-google"></i>    | bwi-google    | link to our google page      |
| <i class="bwi bwi-instagram"></i> | bwi-instagram | link to our Instagram page   |
| <i class="bwi bwi-linkedin"></i>  | bwi-linkedin  | link to our linkedIn page    |
| <i class="bwi bwi-linux"></i>     | bwi-linux     | linux support                |
| <i class="bwi bwi-mastodon"></i>  | bwi-mastodon  | link to our Mastodon page    |
| <i class="bwi bwi-opera"></i>     | bwi-opera     | support for Opera            |
| <i class="bwi bwi-paypal"></i>    | bwi-paypal    | PayPal                       |
| <i class="bwi bwi-reddit"></i>    | bwi-reddit    | link to our reddit community |
| <i class="bwi bwi-safari"></i>    | bwi-safari    | safari support               |
| <i class="bwi bwi-twitch"></i>    | bwi-twitch    | link to our Twitch page      |
| <i class="bwi bwi-twitter"></i>   | bwi-twitter   | link to our twitter page     |
| <i class="bwi bwi-windows"></i>   | bwi-windows   | support for windows          |
| <i class="bwi bwi-youtube"></i>   | bwi-youtube   | link to our youtube page     |