feat: add reusable private and shared account icons

apps/web/src/style.css

@@ -901,3 +901,98 @@ footer {
     font-size: 11px;
   }
 }
+
+.position-icon img {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+}
+.icon-library {
+  display: grid;
+  gap: 12px;
+  min-width: 0;
+}
+.icon-library h2,
+.icon-library p {
+  margin: 0;
+}
+.icon-library label {
+  display: grid;
+  gap: 6px;
+}
+.icon-library .check-line {
+  display: flex;
+}
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
+  gap: 8px;
+  max-height: 340px;
+  overflow: auto;
+  padding: 4px;
+}
+.icon-option {
+  background: var(--surface, #fff);
+  color: inherit;
+  border: 1px solid #dce3e5;
+  padding: 10px 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+.icon-option img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+.icon-option span {
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.icon-option small {
+  color: #64748b;
+}
+.icon-option:disabled {
+  opacity: 1;
+  cursor: default;
+}
+.icon-option.selected {
+  border: 2px solid #087e70;
+  background: #effbf7;
+}
+.icon-selection,
+.icon-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+}
+.icon-selection img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+.icon-upload {
+  border-top: 1px solid #dce3e5;
+  padding-top: 12px;
+}
+.icon-upload summary {
+  cursor: pointer;
+  margin-bottom: 10px;
+}
+.icon-upload label {
+  margin-bottom: 10px;
+}
+.icon-error {
+  color: #b42318;
+}
+
+.detail-icon {
+  width: 42px;
+  height: 42px;
+  object-fit: contain;
+  vertical-align: middle;
+  margin-right: 12px;
+}