1
0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00

[CL-333] Icon Refresh Feature Branch (#14298)

* [CL-571] Update icons to new fileset and metaphors (#14163)

* [CL-518] Convert icons docs to stories (#14299)

* [CL-574] Update inline autofill icons (#14379)

---------

Co-authored-by: William Martin <contact@willmartian.com>
This commit is contained in:
Vicki League
2025-05-07 17:07:14 -04:00
committed by GitHub
parent 74b6bb15e8
commit 8ecb32f30f
78 changed files with 1735 additions and 1582 deletions

View File

@@ -0,0 +1,14 @@
import { svgIcon } from "../icon";
export const GeneratorInactive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.05169 10.7766C3.00697 11.1884 3.30455 11.5585 3.71634 11.6032C4.12814 11.6479 4.49821 11.3503 4.54292 10.9386C4.93486 7.32891 8.05586 4.49609 11.8708 4.49609C14.608 4.49609 16.9911 5.95574 18.2619 8.11589H16.2676C15.8534 8.11589 15.5176 8.45168 15.5176 8.86589C15.5176 9.2801 15.8534 9.61589 16.2676 9.61589H20.2491C20.6634 9.61589 20.9991 9.2801 20.9991 8.86589V4.88347C20.9991 4.46926 20.6634 4.13347 20.2491 4.13347C19.8349 4.13347 19.4991 4.46926 19.4991 4.88347V7.26212C17.9511 4.70467 15.1112 2.99609 11.8708 2.99609C7.30492 2.99609 3.52788 6.39108 3.05169 10.7766ZM20.9425 13.2164C20.9872 12.8046 20.6896 12.4345 20.2778 12.3898C19.866 12.3451 19.4959 12.6427 19.4512 13.0545C19.0593 16.6641 15.9383 19.4969 12.1233 19.4969C9.38639 19.4969 7.0034 18.0375 5.73253 15.8776H7.72852C8.14273 15.8776 8.47852 15.5418 8.47852 15.1276C8.47852 14.7134 8.14273 14.3776 7.72852 14.3776H3.74695C3.33273 14.3776 2.99695 14.7134 2.99695 15.1276V19.11C2.99695 19.5242 3.33273 19.86 3.74695 19.86C4.16116 19.86 4.49695 19.5242 4.49695 19.11V16.7341C6.04539 19.2898 8.88426 20.9969 12.1233 20.9969C16.6892 20.9969 20.4663 17.6019 20.9425 13.2164ZM12.7514 9.43718C12.7514 9.02297 12.4156 8.68718 12.0014 8.68718C11.5872 8.68718 11.2514 9.02297 11.2514 9.43718V11.0305L9.75498 10.5402C9.36135 10.4113 8.93772 10.6258 8.80876 11.0195C8.6798 11.4131 8.89436 11.8367 9.28799 11.9657L10.798 12.4604L9.85608 13.7799C9.61543 14.117 9.69364 14.5854 10.0308 14.826C10.3679 15.0667 10.8363 14.9885 11.0769 14.6514L12.0014 13.3562L12.9261 14.6514C13.1667 14.9885 13.6351 15.0667 13.9723 14.826C14.3094 14.5853 14.3876 14.1169 14.1469 13.7798L13.2049 12.4603L14.7146 11.9657C15.1083 11.8367 15.3228 11.4131 15.1939 11.0195C15.0649 10.6258 14.6412 10.4113 14.2476 10.5402L12.7514 11.0305V9.43718Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
</svg>
`;
export const GeneratorActive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z" class="tw-fill-primary-100" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.05169 10.7766C3.00697 11.1884 3.30455 11.5585 3.71634 11.6032C4.12814 11.6479 4.49821 11.3503 4.54292 10.9386C4.93486 7.32891 8.05586 4.49609 11.8708 4.49609C14.608 4.49609 16.9911 5.95574 18.2619 8.11589H16.2676C15.8534 8.11589 15.5176 8.45168 15.5176 8.86589C15.5176 9.2801 15.8534 9.61589 16.2676 9.61589H20.2491C20.6634 9.61589 20.9991 9.2801 20.9991 8.86589V4.88347C20.9991 4.46926 20.6634 4.13347 20.2491 4.13347C19.8349 4.13347 19.4991 4.46926 19.4991 4.88347V7.26212C17.9511 4.70467 15.1112 2.99609 11.8708 2.99609C7.30492 2.99609 3.52788 6.39108 3.05169 10.7766ZM20.9425 13.2164C20.9872 12.8046 20.6896 12.4345 20.2778 12.3898C19.866 12.3451 19.4959 12.6427 19.4512 13.0545C19.0593 16.6641 15.9383 19.4969 12.1233 19.4969C9.38639 19.4969 7.0034 18.0375 5.73253 15.8776H7.72852C8.14273 15.8776 8.47852 15.5418 8.47852 15.1276C8.47852 14.7134 8.14273 14.3776 7.72852 14.3776H3.74695C3.33273 14.3776 2.99695 14.7134 2.99695 15.1276V19.11C2.99695 19.5242 3.33273 19.86 3.74695 19.86C4.16116 19.86 4.49695 19.5242 4.49695 19.11V16.7341C6.04539 19.2898 8.88426 20.9969 12.1233 20.9969C16.6892 20.9969 20.4663 17.6019 20.9425 13.2164ZM12.7514 9.43718C12.7514 9.02297 12.4156 8.68718 12.0014 8.68718C11.5872 8.68718 11.2514 9.02297 11.2514 9.43718V11.0305L9.75498 10.5402C9.36135 10.4113 8.93772 10.6258 8.80876 11.0195C8.6798 11.4131 8.89436 11.8367 9.28799 11.9657L10.798 12.4604L9.85608 13.7799C9.61543 14.117 9.69364 14.5854 10.0308 14.826C10.3679 15.0667 10.8363 14.9885 11.0769 14.6514L12.0014 13.3562L12.9261 14.6514C13.1667 14.9885 13.6351 15.0667 13.9723 14.826C14.3094 14.5853 14.3876 14.1169 14.1469 13.7798L13.2049 12.4603L14.7146 11.9657C15.1083 11.8367 15.3228 11.4131 15.1939 11.0195C15.0649 10.6258 14.6412 10.4113 14.2476 10.5402L12.7514 11.0305V9.43718Z" class="tw-fill-primary-600" />
</svg>
`;

View File

@@ -2,3 +2,7 @@ export * from "./search";
export * from "./security";
export * from "./no-access";
export * from "./no-results";
export * from "./generator";
export * from "./send";
export * from "./settings";
export * from "./vault";

View File

@@ -0,0 +1,14 @@
import { svgIcon } from "../icon";
export const SendInactive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.26134 15.8194L3.32764 13.1612C2.24617 12.6767 2.2182 11.1515 3.28118 10.6277L19.4762 2.6472C20.5111 2.13723 21.6841 3.02766 21.471 4.16154L18.5696 19.6026C18.3851 20.5849 17.2603 21.0629 16.4249 20.5141L14.1152 18.9965L11.7106 21.1294C11.4413 21.3683 11.0937 21.5003 10.7337 21.5003C9.92052 21.5003 9.26134 20.8411 9.26134 20.0279V15.8194ZM4.13499 11.8792L19.9599 4.08112L17.1231 19.178L10.8804 15.0764L15.5129 10.6535C15.8125 10.3675 15.8235 9.89271 15.5374 9.59312C15.2514 9.29353 14.7767 9.28254 14.4771 9.56857L9.52695 14.2947L4.13499 11.8792ZM12.8167 18.1433L10.7613 16.7929V19.9664L12.8167 18.1433Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
</svg>
`;
export const SendActive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.0621 20.2221V14.7319L15.4504 9.56824L20.2795 3.68408L17.32 19.6084L13.9377 17.5259L10.9361 20.2221H10.0621Z" class="tw-fill-primary-100" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.26134 15.8194L3.32764 13.1612C2.24617 12.6767 2.2182 11.1515 3.28118 10.6277L19.4762 2.6472C20.5111 2.13723 21.6841 3.02766 21.471 4.16154L18.5696 19.6026C18.3851 20.5849 17.2603 21.0629 16.4249 20.5141L14.1152 18.9965L11.7106 21.1294C11.4413 21.3683 11.0937 21.5003 10.7337 21.5003C9.92052 21.5003 9.26134 20.8411 9.26134 20.0279V15.8194ZM4.13499 11.8792L19.9599 4.08112L17.1231 19.178L10.8804 15.0764L15.5129 10.6535C15.8125 10.3675 15.8235 9.89271 15.5374 9.59312C15.2514 9.29353 14.7767 9.28254 14.4771 9.56857L9.52695 14.2947L4.13499 11.8792ZM12.8167 18.1433L10.7613 16.7929V19.9664L12.8167 18.1433Z" class="tw-fill-primary-600" />
</svg>
`;

View File

@@ -0,0 +1,16 @@
import { svgIcon } from "../icon";
export const SettingsInactive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8618 4.17107L14.6161 2.69633C14.5491 2.29451 14.2014 2 13.7941 2H10.2059C9.79857 2 9.45091 2.29451 9.38394 2.69633L9.13815 4.17107C8.22425 4.50524 7.38523 4.99487 6.6531 5.60794L5.25079 5.08259C4.86931 4.93967 4.44043 5.0935 4.23675 5.44629L2.44269 8.55369C2.239 8.90648 2.32023 9.35482 2.63473 9.61373L3.78982 10.5646C3.70886 11.0309 3.66666 11.5105 3.66666 12C3.66666 12.4895 3.70886 12.969 3.78981 13.4354L2.63473 14.3863C2.32023 14.6452 2.239 15.0935 2.44269 15.4463L4.23675 18.5537C4.44043 18.9065 4.86931 19.0603 5.25079 18.9174L6.65308 18.392C7.38521 19.0051 8.22424 19.4948 9.13815 19.8289L9.38394 21.3037C9.45091 21.7055 9.79857 22 10.2059 22H13.7941C14.2014 22 14.5491 21.7055 14.6161 21.3037L14.8618 19.8289C15.7757 19.4948 16.6148 19.0051 17.3469 18.3921L18.7492 18.9174C19.1306 19.0603 19.5595 18.9065 19.7632 18.5537L21.5573 15.4463C21.7609 15.0935 21.6797 14.6452 21.3652 14.3863L20.2102 13.4354C20.2911 12.9691 20.3333 12.4895 20.3333 12C20.3333 11.5105 20.2911 11.0309 20.2102 10.5646L21.3652 9.61373C21.6797 9.35482 21.7609 8.90648 21.5573 8.55369L19.7632 5.44629C19.5595 5.0935 19.1306 4.93967 18.7492 5.08259L17.3469 5.60793C16.6148 4.99486 15.7757 4.50524 14.8618 4.17107ZM14.3467 5.57985L13.5259 5.27973L13.2293 3.5H10.7707L10.4741 5.27973L9.65327 5.57985C8.90522 5.85338 8.21727 6.25458 7.61612 6.75798L6.94571 7.31937L5.25341 6.68538L4.0241 8.8146L5.417 9.96128L5.26771 10.8212C5.2014 11.2031 5.16666 11.5969 5.16666 12C5.16666 12.4031 5.2014 12.7968 5.26771 13.1788L5.417 14.0387L4.0241 15.1854L5.25341 17.3146L6.94569 16.6806L7.6161 17.242C8.21726 17.7454 8.90521 18.1466 9.65327 18.4201L10.4741 18.7203L10.7707 20.5H13.2293L13.5259 18.7203L14.3467 18.4201C15.0948 18.1466 15.7827 17.7454 16.3839 17.242L17.0543 16.6806L18.7465 17.3146L19.9758 15.1854L18.583 14.0387L18.7323 13.1788C18.7986 12.7969 18.8333 12.4031 18.8333 12C18.8333 11.5969 18.7986 11.2031 18.7323 10.8212L18.583 9.96125L19.9758 8.8146L18.7465 6.68538L17.0543 7.31936L16.3839 6.75797C15.7827 6.25458 15.0948 5.85337 14.3467 5.57985ZM20.2582 14.6963L20.2577 14.6973L20.2582 14.6963ZM13.1365 2.94293C13.1364 2.94267 13.1365 2.9432 13.1365 2.94293V2.94293Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
</svg>
`;
export const SettingsActive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.9672 5.03286C19.2837 5.00445 19.5977 5.15974 19.7632 5.44632L21.5573 8.55372C21.7609 8.90651 21.6797 9.35485 21.3652 9.61376L20.2102 10.5646C20.2911 11.0309 20.3333 11.5106 20.3333 12C20.3333 12.4895 20.2911 12.9691 20.2102 13.4354L21.3652 14.3863C21.6797 14.6452 21.7609 15.0935 21.5573 15.4463L19.7632 18.5537C19.5595 18.9065 19.1306 19.0603 18.7492 18.9174L17.3469 18.3921C16.6148 19.0052 15.7757 19.4948 14.8618 19.829L14.6161 21.3037C14.5491 21.7055 14.2014 22 13.7941 22H10.2059C9.79857 22 9.45091 21.7055 9.38394 21.3037L9.13815 19.829C8.22424 19.4948 7.38521 19.0052 6.65308 18.3921L5.25079 18.9174C5.17921 18.9442 5.10596 18.9606 5.03284 18.9672L10.2322 13.7678C10.6846 14.2202 11.3096 14.5 12 14.5C13.3807 14.5 14.5 13.3807 14.5 12C14.5 11.3097 14.2202 10.6847 13.7678 10.2323L18.9672 5.03286Z" class="tw-fill-primary-100" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12ZM14.5 12C14.5 13.3807 13.3807 14.5 12 14.5C10.6193 14.5 9.5 13.3807 9.5 12C9.5 10.6193 10.6193 9.5 12 9.5C13.3807 9.5 14.5 10.6193 14.5 12Z" class="tw-fill-primary-600" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8618 4.17107L14.6161 2.69633C14.5491 2.29451 14.2014 2 13.7941 2H10.2059C9.79857 2 9.45091 2.29451 9.38394 2.69633L9.13815 4.17107C8.22425 4.50524 7.38523 4.99487 6.6531 5.60794L5.25079 5.08259C4.86931 4.93967 4.44043 5.0935 4.23675 5.44629L2.44269 8.55369C2.239 8.90648 2.32023 9.35482 2.63473 9.61373L3.78982 10.5646C3.70886 11.0309 3.66666 11.5105 3.66666 12C3.66666 12.4895 3.70886 12.969 3.78981 13.4354L2.63473 14.3863C2.32023 14.6452 2.239 15.0935 2.44269 15.4463L4.23675 18.5537C4.44043 18.9065 4.86931 19.0603 5.25079 18.9174L6.65308 18.392C7.38521 19.0051 8.22424 19.4948 9.13815 19.8289L9.38394 21.3037C9.45091 21.7055 9.79857 22 10.2059 22H13.7941C14.2014 22 14.5491 21.7055 14.6161 21.3037L14.8618 19.8289C15.7757 19.4948 16.6148 19.0051 17.3469 18.3921L18.7492 18.9174C19.1306 19.0603 19.5595 18.9065 19.7632 18.5537L21.5573 15.4463C21.7609 15.0935 21.6797 14.6452 21.3652 14.3863L20.2102 13.4354C20.2911 12.9691 20.3333 12.4895 20.3333 12C20.3333 11.5105 20.2911 11.0309 20.2102 10.5646L21.3652 9.61373C21.6797 9.35482 21.7609 8.90648 21.5573 8.55369L19.7632 5.44629C19.5595 5.0935 19.1306 4.93967 18.7492 5.08259L17.3469 5.60793C16.6148 4.99486 15.7757 4.50524 14.8618 4.17107ZM14.3467 5.57985L13.5259 5.27973L13.2293 3.5H10.7707L10.4741 5.27973L9.65327 5.57985C8.90522 5.85338 8.21727 6.25458 7.61612 6.75798L6.94571 7.31937L5.25341 6.68538L4.0241 8.8146L5.417 9.96128L5.26771 10.8212C5.2014 11.2031 5.16666 11.5969 5.16666 12C5.16666 12.4031 5.2014 12.7968 5.26771 13.1788L5.417 14.0387L4.0241 15.1854L5.25341 17.3146L6.94569 16.6806L7.6161 17.242C8.21726 17.7454 8.90521 18.1466 9.65327 18.4201L10.4741 18.7203L10.7707 20.5H13.2293L13.5259 18.7203L14.3467 18.4201C15.0948 18.1466 15.7827 17.7454 16.3839 17.242L17.0543 16.6806L18.7465 17.3146L19.9758 15.1854L18.583 14.0387L18.7323 13.1788C18.7986 12.7969 18.8333 12.4031 18.8333 12C18.8333 11.5969 18.7986 11.2031 18.7323 10.8212L18.583 9.96125L19.9758 8.8146L18.7465 6.68538L17.0543 7.31936L16.3839 6.75797C15.7827 6.25458 15.0948 5.85337 14.3467 5.57985ZM20.2582 14.6963L20.2577 14.6973L20.2582 14.6963ZM13.1365 2.94293C13.1364 2.94267 13.1365 2.9432 13.1365 2.94293V2.94293Z" class="tw-fill-primary-600" />
</svg>
`;

View File

@@ -0,0 +1,16 @@
import { svgIcon } from "../icon";
export const VaultInactive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.16151 14.7066C7.57847 15.1817 8.12811 15.5302 8.75 15.6897V16.5488C8.75 16.963 9.08579 17.2988 9.5 17.2988C9.91421 17.2988 10.25 16.963 10.25 16.5488V15.6993C10.881 15.5462 11.4395 15.199 11.8635 14.7222L12.6407 15.1704C12.9995 15.3773 13.4584 15.2544 13.6657 14.8957C13.873 14.5371 13.7501 14.0786 13.3913 13.8717L12.5794 13.4035C12.6587 13.1163 12.7012 12.8131 12.7012 12.4997C12.7012 12.1815 12.6574 11.874 12.5758 11.583L13.3929 11.1118C13.7517 10.9048 13.8745 10.4464 13.6673 10.0877C13.46 9.72912 13.0011 9.60616 12.6423 9.8131L11.8547 10.2673C11.4318 9.79552 10.8766 9.45211 10.25 9.30002V8.43391C10.25 8.0197 9.91421 7.68391 9.5 7.68391C9.08579 7.68391 8.75 8.0197 8.75 8.43391V9.30968C8.13244 9.46809 7.58613 9.81284 7.17024 10.2828L6.35577 9.8131C5.99696 9.60616 5.53805 9.72912 5.33077 10.0877C5.1235 10.4464 5.24635 10.9048 5.60516 11.1118L6.45732 11.6032C6.37929 11.8882 6.33754 12.1889 6.33754 12.4997C6.33754 12.8058 6.37804 13.1021 6.45381 13.3832L5.60676 13.8717C5.24794 14.0786 5.12509 14.5371 5.33237 14.8957C5.53964 15.2544 5.99855 15.3773 6.35737 15.1704L7.16151 14.7066ZM7.83754 12.4997C7.83754 13.5327 8.636 14.2864 9.51935 14.2864C10.4027 14.2864 11.2012 13.5327 11.2012 12.4997C11.2012 11.4667 10.4027 10.713 9.51935 10.713C8.636 10.713 7.83754 11.4667 7.83754 12.4997Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7 5C21.418 5 22 5.58203 22 6.3V18.6838C22 19.4018 21.418 19.9838 20.7 19.9838H19.3105V20.2957C19.3105 20.7099 18.9748 21.0457 18.5605 21.0457C18.1463 21.0457 17.8105 20.7099 17.8105 20.2957V19.9838H6.18555V20.2957C6.18555 20.7099 5.84976 21.0457 5.43555 21.0457C5.02133 21.0457 4.68555 20.7099 4.68555 20.2957V19.9838H3.3C2.58203 19.9838 2 19.4018 2 18.6838V6.3C2 5.58203 2.58203 5 3.3 5H20.7ZM20.5 16.0509V18.4838H3.5V6.5H20.5V8.93202H19.1875C18.7733 8.93202 18.4375 9.26781 18.4375 9.68202C18.4375 10.0962 18.7733 10.432 19.1875 10.432H20.5V14.5509H19.1875C18.7733 14.5509 18.4375 14.8867 18.4375 15.3009C18.4375 15.7152 18.7733 16.0509 19.1875 16.0509H20.5Z" class="tw-fill-secondary-600 group-hover/tab-nav-btn:tw-fill-primary-600" />
</svg>
`;
export const VaultActive = svgIcon`
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.5034 18.4716H3.50201L9.67797 14.294C10.3648 14.1965 10.7743 13.8378 10.9689 13.4272L20.5034 6.47314V18.4716Z" class="tw-fill-primary-100" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.16151 14.7066C7.57847 15.1817 8.12811 15.5302 8.75 15.6897V16.5488C8.75 16.963 9.08579 17.2988 9.5 17.2988C9.91421 17.2988 10.25 16.963 10.25 16.5488V15.6993C10.881 15.5462 11.4395 15.199 11.8635 14.7222L12.6407 15.1704C12.9995 15.3773 13.4584 15.2544 13.6657 14.8957C13.873 14.5371 13.7501 14.0786 13.3913 13.8717L12.5794 13.4035C12.6587 13.1163 12.7012 12.8131 12.7012 12.4997C12.7012 12.1815 12.6574 11.874 12.5758 11.583L13.3929 11.1118C13.7517 10.9048 13.8745 10.4464 13.6673 10.0877C13.46 9.72912 13.0011 9.60616 12.6423 9.8131L11.8547 10.2673C11.4318 9.79552 10.8766 9.45211 10.25 9.30002V8.43391C10.25 8.0197 9.91421 7.68391 9.5 7.68391C9.08579 7.68391 8.75 8.0197 8.75 8.43391V9.30968C8.13244 9.46809 7.58613 9.81284 7.17024 10.2828L6.35577 9.8131C5.99696 9.60616 5.53805 9.72912 5.33077 10.0877C5.1235 10.4464 5.24635 10.9048 5.60516 11.1118L6.45732 11.6032C6.37929 11.8882 6.33754 12.1889 6.33754 12.4997C6.33754 12.8058 6.37804 13.1021 6.45381 13.3832L5.60676 13.8717C5.24794 14.0786 5.12509 14.5371 5.33237 14.8957C5.53964 15.2544 5.99855 15.3773 6.35737 15.1704L7.16151 14.7066ZM7.83754 12.4997C7.83754 13.5327 8.636 14.2864 9.51935 14.2864C10.4027 14.2864 11.2012 13.5327 11.2012 12.4997C11.2012 11.4667 10.4027 10.713 9.51935 10.713C8.636 10.713 7.83754 11.4667 7.83754 12.4997Z" class="tw-fill-primary-600" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7 5C21.418 5 22 5.58203 22 6.3V18.6838C22 19.4018 21.418 19.9838 20.7 19.9838H19.3105V20.2957C19.3105 20.7099 18.9748 21.0457 18.5605 21.0457C18.1463 21.0457 17.8105 20.7099 17.8105 20.2957V19.9838H6.18555V20.2957C6.18555 20.7099 5.84976 21.0457 5.43555 21.0457C5.02133 21.0457 4.68555 20.7099 4.68555 20.2957V19.9838H3.3C2.58203 19.9838 2 19.4018 2 18.6838V6.3C2 5.58203 2.58203 5 3.3 5H20.7ZM20.5 16.0509V18.4838H3.5V6.5H20.5V8.93202H19.1875C18.7733 8.93202 18.4375 9.26781 18.4375 9.68202C18.4375 10.0962 18.7733 10.432 19.1875 10.432H20.5V14.5509H19.1875C18.7733 14.5509 18.4375 14.8867 18.4375 15.3009C18.4375 15.7152 18.7733 16.0509 19.1875 16.0509H20.5Z" class="tw-fill-primary-600" />
</svg>
`;