diff --git a/impro-plugin/main.js b/impro-plugin/main.js
index d3c9773e..85143c84 100644
--- a/impro-plugin/main.js
+++ b/impro-plugin/main.js
@@ -330,12 +330,12 @@ export class PluginSettingTab {
 
 export class Setting {
   constructor(containerEl) {
-    this.settingEl = containerEl.createDiv({ cls: "plugin-setting-item" });
-    this.infoEl = this.settingEl.createDiv({ cls: "plugin-setting-item-info" });
-    this.nameEl = this.infoEl.createDiv({ cls: "plugin-setting-item-name" });
-    this.descEl = this.infoEl.createDiv({ cls: "plugin-setting-item-desc" });
+    this.settingEl = containerEl.createDiv({ cls: "setting-item" });
+    this.infoEl = this.settingEl.createDiv({ cls: "setting-item-info" });
+    this.nameEl = this.infoEl.createEl("h2", { cls: "setting-item-name" });
+    this.descEl = this.infoEl.createEl("p", { cls: "setting-item-desc" });
     this.controlEl = this.settingEl.createDiv({
-      cls: "plugin-setting-item-control",
+      cls: "setting-item-control",
     });
   }
   setName(text) {
@@ -372,7 +372,7 @@ class TextComponent {
   constructor(containerEl) {
     this.el = containerEl.createEl("input", {
       attr: { type: "text" },
-      cls: "plugin-setting-text-input",
+      cls: "setting-item-text-input",
     });
   }
   setValue(value) {
@@ -391,9 +391,8 @@ class TextComponent {
 
 class ToggleComponent {
   constructor(containerEl) {
-    this.el = containerEl.createEl("input", {
-      attr: { type: "checkbox" },
-      cls: "plugin-setting-toggle",
+    this.el = containerEl.createEl("toggle-switch", {
+      cls: "setting-item-toggle",
     });
   }
   setValue(value) {
@@ -410,7 +409,7 @@ class ToggleComponent {
 class DropdownComponent {
   constructor(containerEl) {
     this.el = containerEl.createEl("select", {
-      cls: "plugin-setting-dropdown",
+      cls: "setting-item-dropdown",
     });
   }
   addOption(value, label) {
@@ -442,7 +441,7 @@ class DropdownComponent {
 class ButtonComponent {
   constructor(containerEl) {
     this.el = containerEl.createEl("button", {
-      cls: "plugin-setting-button",
+      cls: "rounded-button",
     });
   }
   setButtonText(text) {
@@ -450,7 +449,7 @@ class ButtonComponent {
     return this;
   }
   setCta() {
-    this.el.addClass("primary-button");
+    this.el.addClass("rounded-button-primary");
     return this;
   }
   onClick(callback) {
@@ -459,6 +458,31 @@ class ButtonComponent {
   }
 }
 
+class IconComponent {
+  constructor(containerEl) {
+    this.el = containerEl.createEl("plugin-icon");
+  }
+  setIcon(name) {
+    this.el.setAttr("icon", name);
+    return this;
+  }
+}
+
+class ProfilesListComponent {
+  constructor(containerEl) {
+    this.el = containerEl.createEl("plugin-profiles-list");
+  }
+  setDids(dids) {
+    const value = Array.isArray(dids) ? dids.join(",") : String(dids ?? "");
+    this.el.setAttr("dids", value);
+    return this;
+  }
+  setEmptyMessage(message) {
+    this.el.setAttr("empty-message", message);
+    return this;
+  }
+}
+
 class VirtualEl {
   constructor(tag) {
     this.tag = tag;
@@ -533,6 +557,18 @@ class VirtualEl {
     return this.createEl("span", options, callback);
   }
 
+  createProfilesList(callback) {
+    const component = new ProfilesListComponent(this);
+    if (typeof callback === "function") callback(component);
+    return component;
+  }
+
+  createIcon(callback) {
+    const component = new IconComponent(this);
+    if (typeof callback === "function") callback(component);
+    return component;
+  }
+
   _serialize() {
     return {
       tag: this.tag,
diff --git a/package.json b/package.json
index aead5391..22dc1dbb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "impro",
-  "version": "0.14.91",
+  "version": "0.14.92",
   "type": "module",
   "scripts": {
     "start": "rm -rf build && NODE_ENV=development eleventy --serve",
diff --git a/src/css/style.css b/src/css/style.css
index ec227cdf..db8e4f6d 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -5601,21 +5601,6 @@ img[data-lightbox] {
   position: relative;
 }
 
-.settings-section-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 16px;
-}
-
-.settings-section-row .settings-section-text {
-  flex: 1;
-  min-width: 0;
-}
-
-.settings-section-row .settings-section-text > :last-child {
-  margin-bottom: 0;
-}
-
 .settings-section h2 {
   font-size: 16px;
   font-weight: 500;
@@ -5646,17 +5631,6 @@ img[data-lightbox] {
   background: none;
 }
 
-.settings-select {
-  padding: 8px 12px;
-  border-radius: var(--text-input-border-radius);
-  border: var(--hair) solid var(--post-border-color);
-  background: var(--text-input-background-color);
-  color: var(--text-color);
-  font-size: 14px;
-  cursor: pointer;
-  flex-shrink: 0;
-}
-
 .settings-footer-links {
   padding-top: 12px;
   display: flex;
@@ -7495,20 +7469,7 @@ image-cropper {
   gap: 12px;
 }
 
-.plugin-settings-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: inherit;
-  text-decoration: none;
-}
-
-.plugin-settings-link .icon {
-  width: 24px;
-  height: 24px;
-}
-
-.plugin-uninstall-button {
+.icon-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -7517,17 +7478,23 @@ image-cropper {
   border: none;
   color: inherit;
   cursor: pointer;
+  text-decoration: none;
 }
 
-.plugin-list-item.uninstalling {
+.icon-button:disabled {
   opacity: 0.5;
+  cursor: default;
 }
 
-.plugin-uninstall-button .icon {
+.icon-button .icon {
   width: 24px;
   height: 24px;
 }
 
+.plugin-list-item.uninstalling {
+  opacity: 0.5;
+}
+
 .plugin-settings-tab h1,
 .plugin-settings-tab h2,
 .plugin-settings-tab h3,
@@ -7560,47 +7527,57 @@ image-cropper {
   margin: 8px 0;
 }
 
-.plugin-setting-item {
+.setting-item {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 12px 16px;
-  padding: 16px 16px;
+  padding: 16px;
   border-bottom: var(--hair) solid var(--generic-border-color);
 }
 
-.plugin-setting-item:last-child {
+.setting-item:last-child {
   border-bottom: none;
 }
 
-.plugin-setting-item-info {
+.setting-item-info {
   flex: 1 1 200px;
   min-width: 0;
   max-width: 100%;
   overflow-wrap: anywhere;
 }
 
-.plugin-setting-item-name {
+h2.setting-item-name {
+  font-size: inherit;
+  margin: 0;
+  padding: 0;
+}
+
+.setting-item-name {
   font-weight: 600;
   color: var(--text-color);
 }
 
-.plugin-setting-item-desc {
+p.setting-item-desc {
+  margin: 4px 0 0;
+}
+
+.setting-item-desc {
   font-size: 14px;
   color: var(--text-color-secondary);
   margin-top: 4px;
 }
 
-.plugin-setting-item-control {
+.setting-item-control {
   flex: 0 0 auto;
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.plugin-setting-text-input,
-.plugin-setting-dropdown,
+.setting-item-text-input,
+.setting-item-dropdown,
 .plugin-settings-tab textarea {
   font-size: 16px;
   padding: 8px 10px;
@@ -7615,59 +7592,12 @@ image-cropper {
   resize: vertical;
 }
 
-.plugin-setting-text-input {
+.setting-item-text-input {
   min-width: 180px;
 }
 
-.plugin-setting-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  font-size: 14px;
-  padding: 8px 14px;
-  border-radius: var(--pill-button-border-radius, 999px);
-  border: var(--hair) solid var(--generic-border-color);
-  background: var(--primary-button-muted-color);
-  color: var(--text-color);
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.plugin-setting-button.primary-button {
-  background: var(--primary-button-color);
-  color: var(--primary-button-text-color);
-  border-color: transparent;
-}
-
-.plugin-setting-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.plugin-setting-button .loading-spinner {
-  border-left-color: transparent;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
-  vertical-align: middle;
-}
-
-.plugin-setting-button.primary-button .loading-spinner {
-  border-top-color: var(--primary-button-text-color);
-}
-
-@media (min-width: 800px) {
-  .plugin-setting-button:not(:disabled):hover {
-    background: var(--primary-button-muted-hover-color);
-  }
-
-  .plugin-setting-button.primary-button:not(:disabled):hover {
-    background: var(--primary-button-hover-color);
-  }
-}
-
 @media (max-width: 600px) {
-  .plugin-setting-text-input {
+  .setting-item-text-input {
     min-width: 0;
   }
 }
@@ -7694,27 +7624,6 @@ image-cropper {
   min-height: 37px;
 }
 
-.plugin-reload-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-}
-
-.plugin-reload-button:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-.plugin-reload-button .icon {
-  width: 24px;
-  height: 24px;
-}
-
 .external-link-warning-href {
   display: block;
   padding: 12px;
diff --git a/src/js/plugins/pluginRendering.js b/src/js/plugins/pluginRendering.js
index 4fd36d98..9976bb62 100644
--- a/src/js/plugins/pluginRendering.js
+++ b/src/js/plugins/pluginRendering.js
@@ -37,8 +37,9 @@ const ALLOWED_TAGS = [
   "label",
   "textarea",
   "a",
-  "profiles-list",
+  "plugin-profiles-list",
   "plugin-icon",
+  "toggle-switch",
 ];
 
 const ALLOWED_EVENTS = ["click", "change", "input"];
@@ -111,8 +112,6 @@ function resolveTag(node, pluginId) {
     }
     tag = "span";
   }
-  if (tag === "input" && node.attrs?.type === "checkbox") tag = "toggle-switch";
-  if (tag === "profiles-list") tag = "plugin-profiles-list";
   return tag;
 }
 
diff --git a/src/js/views/settings/appearance.view.js b/src/js/views/settings/appearance.view.js
index 1f1676fa..7122009b 100644
--- a/src/js/views/settings/appearance.view.js
+++ b/src/js/views/settings/appearance.view.js
@@ -66,47 +66,54 @@ class SettingsAppearanceView extends View {
               })}
               <main>
                 <section
-                  class="settings-section settings-section-row"
+                  class="setting-item"
                   data-testid="settings-section-color-scheme"
                 >
-                  <div class="settings-section-text">
-                    <h2>Color scheme</h2>
-                    <p>Choose between light and dark mode.</p>
+                  <div class="setting-item-info">
+                    <h2 class="setting-item-name">Color scheme</h2>
+                    <p class="setting-item-desc">
+                      Choose between light and dark mode.
+                    </p>
                   </div>
-                  <select
-                    class="settings-select"
-                    @change=${(e) => {
-                      handleColorSchemeChange(e.target.value);
-                    }}
-                    .value=${currentColorScheme}
-                  >
-                    <option
-                      value="system"
-                      ?selected=${currentColorScheme === "system"}
-                    >
-                      System
-                    </option>
-                    <option
-                      value="light"
-                      ?selected=${currentColorScheme === "light"}
-                    >
-                      Light
-                    </option>
-                    <option
-                      value="dark"
-                      ?selected=${currentColorScheme === "dark"}
+                  <div class="setting-item-control">
+                    <select
+                      class="setting-item-dropdown"
+                      data-testid="color-scheme-select"
+                      @change=${(e) => {
+                        handleColorSchemeChange(e.target.value);
+                      }}
+                      .value=${currentColorScheme}
                     >
-                      Dark
-                    </option>
-                  </select>
+                      <option
+                        value="system"
+                        ?selected=${currentColorScheme === "system"}
+                      >
+                        System
+                      </option>
+                      <option
+                        value="light"
+                        ?selected=${currentColorScheme === "light"}
+                      >
+                        Light
+                      </option>
+                      <option
+                        value="dark"
+                        ?selected=${currentColorScheme === "dark"}
+                      >
+                        Dark
+                      </option>
+                    </select>
+                  </div>
                 </section>
                 <section
-                  class="settings-section settings-section-row"
+                  class="setting-item"
                   data-testid="settings-section-highlight-color"
                 >
-                  <div class="settings-section-text">
-                    <h2>Highlight color</h2>
-                    <p>Choose the highlight color for buttons and links.</p>
+                  <div class="setting-item-info">
+                    <h2 class="setting-item-name">Highlight color</h2>
+                    <p class="setting-item-desc">
+                      Choose the highlight color for buttons and links.
+                    </p>
                   </div>
                   <div class="settings-color-picker">
                     <input
@@ -127,12 +134,14 @@ class SettingsAppearanceView extends View {
                   </div>
                 </section>
                 <section
-                  class="settings-section settings-section-row"
+                  class="setting-item"
                   data-testid="settings-section-like-color"
                 >
-                  <div class="settings-section-text">
-                    <h2>Like color</h2>
-                    <p>Choose the color for liked posts.</p>
+                  <div class="setting-item-info">
+                    <h2 class="setting-item-name">Like color</h2>
+                    <p class="setting-item-desc">
+                      Choose the color for liked posts.
+                    </p>
                   </div>
                   <div class="settings-color-picker">
                     <input
diff --git a/src/js/views/settings/plugins.view.js b/src/js/views/settings/plugins.view.js
index a19e5cfa..d8580a1e 100644
--- a/src/js/views/settings/plugins.view.js
+++ b/src/js/views/settings/plugins.view.js
@@ -249,7 +249,7 @@ class SettingsPluginsView extends View {
                                   : "Check for updates"}
                             </button>
                             <button
-                              class="plugin-reload-button"
+                              class="plugin-reload-button icon-button"
                               aria-label="Reload plugins"
                               ?disabled=${state.reloading}
                               @click=${() => reloadPlugins()}
@@ -319,7 +319,7 @@ class SettingsPluginsView extends View {
                                     : ""}
                                   ${plugin.enabled && plugin.hasSettings
                                     ? html`<a
-                                        class="plugin-settings-link"
+                                        class="plugin-settings-link icon-button"
                                         href="/settings/plugins/${plugin.id}"
                                         aria-label="Settings for ${plugin.name}"
                                       >
@@ -327,7 +327,7 @@ class SettingsPluginsView extends View {
                                       </a>`
                                     : ""}
                                   <button
-                                    class="plugin-uninstall-button"
+                                    class="plugin-uninstall-button icon-button"
                                     aria-label="Uninstall ${plugin.name}"
                                     @click=${() => uninstallPlugin(plugin)}
                                   >
diff --git a/tests/e2e/specs/views/settings/appearance.view.test.js b/tests/e2e/specs/views/settings/appearance.view.test.js
index 69c0daae..f36606e6 100644
--- a/tests/e2e/specs/views/settings/appearance.view.test.js
+++ b/tests/e2e/specs/views/settings/appearance.view.test.js
@@ -36,7 +36,7 @@ test.describe("Settings Appearance view", () => {
     await page.goto("/settings/appearance");
 
     const view = page.locator("#settings-appearance-view");
-    const select = view.locator(".settings-select");
+    const select = view.locator('[data-testid="color-scheme-select"]');
     await expect(select).toBeVisible({ timeout: 10000 });
 
     const options = select.locator("option");
@@ -82,7 +82,7 @@ test.describe("Settings Appearance view", () => {
     await page.goto("/settings/appearance");
 
     const view = page.locator("#settings-appearance-view");
-    const select = view.locator(".settings-select");
+    const select = view.locator('[data-testid="color-scheme-select"]');
     await expect(select).toBeVisible({ timeout: 10000 });
 
     await select.selectOption("dark");
@@ -109,7 +109,7 @@ test.describe("Settings Appearance view", () => {
       "settings-section-like-color",
     ]) {
       await expect(
-        view.locator(`[data-testid="${sectionTestid}"] p`),
+        view.locator(`[data-testid="${sectionTestid}"] .setting-item-desc`),
       ).toBeVisible({ timeout: 10000 });
     }
   });
diff --git a/tests/e2e/specs/views/settings/pluginDetail.view.test.js b/tests/e2e/specs/views/settings/pluginDetail.view.test.js
index ac22e821..8aaa5e27 100644
--- a/tests/e2e/specs/views/settings/pluginDetail.view.test.js
+++ b/tests/e2e/specs/views/settings/pluginDetail.view.test.js
@@ -17,7 +17,7 @@ function seedEnabled(mockServer) {
 async function gotoDetailView(page) {
   await page.goto(`/settings/plugins/${PLUGIN_ID}`);
   const view = page.locator("#settings-plugin-detail-view");
-  await expect(view.locator(".plugin-setting-item").first()).toBeVisible({
+  await expect(view.locator(".setting-item").first()).toBeVisible({
     timeout: 10000,
   });
   return view;
@@ -43,7 +43,7 @@ test.describe("Settings plugin detail view", () => {
     seedEnabled(mockServer);
 
     const view = await gotoDetailView(page);
-    const settings = view.locator(".plugin-setting-item");
+    const settings = view.locator(".setting-item");
     await expect(settings).toHaveCount(4);
 
     await expect(
@@ -72,7 +72,7 @@ test.describe("Settings plugin detail view", () => {
     seedEnabled(mockServer);
 
     const view = await gotoDetailView(page);
-    const settings = view.locator(".plugin-setting-item");
+    const settings = view.locator(".setting-item");
 
     await expect(
       settings.filter({ hasText: "Greeting" }).locator("input[type=text]"),
@@ -93,7 +93,7 @@ test.describe("Settings plugin detail view", () => {
 
     const view = await gotoDetailView(page);
     const greetingInput = view
-      .locator(".plugin-setting-item")
+      .locator(".setting-item")
       .filter({ hasText: "Greeting" })
       .locator("input[type=text]");
 
@@ -117,7 +117,7 @@ test.describe("Settings plugin detail view", () => {
 
     const view = await gotoDetailView(page);
     const toggle = view
-      .locator(".plugin-setting-item")
+      .locator(".setting-item")
       .filter({ hasText: "Loud mode" })
       .locator("toggle-switch");
 
@@ -140,7 +140,7 @@ test.describe("Settings plugin detail view", () => {
 
     const view = await gotoDetailView(page);
     const dropdown = view
-      .locator(".plugin-setting-item")
+      .locator(".setting-item")
       .filter({ hasText: "Theme" })
       .locator("select");
 
@@ -168,7 +168,7 @@ test.describe("Settings plugin detail view", () => {
 
     const view = await gotoDetailView(page);
     const resetButton = view
-      .locator(".plugin-setting-item")
+      .locator(".setting-item")
       .filter({ hasText: "Reset settings" })
       .locator("button");
 
diff --git a/tests/unit/specs/plugins/pluginRendering.test.js b/tests/unit/specs/plugins/pluginRendering.test.js
index 94dbfeb2..c89db9dc 100644
--- a/tests/unit/specs/plugins/pluginRendering.test.js
+++ b/tests/unit/specs/plugins/pluginRendering.test.js
@@ -26,21 +26,29 @@ t.describe("PluginRenderer:render with fresh roots", (it) => {
     assertEquals(first.getAttribute("class"), "x");
   });
 
-  it("rewrites <input type=checkbox> as <toggle-switch>", () => {
+  it("renders <toggle-switch> directly", () => {
+    const { bridge } = makeBridge();
+    const renderer = new PluginRenderer(bridge, "demo");
+    const element = renderer.createRoot().render({ tag: "toggle-switch" });
+    assertEquals(element.tagName.toLowerCase(), "toggle-switch");
+  });
+
+  it("renders <input type=checkbox> as a real checkbox", () => {
     const { bridge } = makeBridge();
     const renderer = new PluginRenderer(bridge, "demo");
     const element = renderer
       .createRoot()
       .render({ tag: "input", attrs: { type: "checkbox" } });
-    assertEquals(element.tagName.toLowerCase(), "toggle-switch");
+    assertEquals(element.tagName.toLowerCase(), "input");
+    assertEquals(element.getAttribute("type"), "checkbox");
   });
 
-  it("rewrites <profiles-list> as <plugin-profiles-list> and passes dataLayer", () => {
+  it("renders <plugin-profiles-list> and passes dataLayer", () => {
     const { bridge } = makeBridge();
     const dataLayer = { declarative: { ensureProfiles: async () => [] } };
     const renderer = new PluginRenderer(bridge, "demo", { dataLayer });
     const element = renderer.createRoot().render({
-      tag: "profiles-list",
+      tag: "plugin-profiles-list",
       attrs: { dids: "did:test:a,did:test:b" },
     });
     assertEquals(element.tagName.toLowerCase(), "plugin-profiles-list");
@@ -48,23 +56,23 @@ t.describe("PluginRenderer:render with fresh roots", (it) => {
     assert(element.dataLayer === dataLayer);
   });
 
-  it("drops disallowed attributes from <profiles-list>", () => {
+  it("drops disallowed attributes from <plugin-profiles-list>", () => {
     const { bridge } = makeBridge();
     const renderer = new PluginRenderer(bridge, "demo", { dataLayer: {} });
     const element = renderer.createRoot().render({
-      tag: "profiles-list",
+      tag: "plugin-profiles-list",
       attrs: { dids: "did:test:a", onclick: "alert(1)" },
     });
     assert(!element.hasAttribute("onclick"));
   });
 
-  it("throws when rendering <profiles-list> without a dataLayer", () => {
+  it("throws when rendering <plugin-profiles-list> without a dataLayer", () => {
     const { bridge } = makeBridge();
     const renderer = new PluginRenderer(bridge, "demo");
     let error = null;
     try {
       renderer.createRoot().render({
-        tag: "profiles-list",
+        tag: "plugin-profiles-list",
         attrs: { dids: "did:test:a" },
       });
     } catch (e) {
diff --git a/tests/unit/specs/plugins/pluginWorker.test.js b/tests/unit/specs/plugins/pluginWorker.test.js
index d2b444bb..3abe0438 100644
--- a/tests/unit/specs/plugins/pluginWorker.test.js
+++ b/tests/unit/specs/plugins/pluginWorker.test.js
@@ -124,7 +124,7 @@ t.describe("VirtualEl (via Setting & friends)", (it) => {
     // settingEl has info + control children
     assertEquals(serialized.children.length, 2);
     const info = serialized.children[0];
-    assertEquals(info.attrs.class, "plugin-setting-item-info");
+    assertEquals(info.attrs.class, "setting-item-info");
     assertEquals(info.children[0].text, "Hello");
     assertEquals(info.children[1].text, "World");
   });
@@ -510,7 +510,7 @@ t.describe("Setting components", (it) => {
     const setting = new Setting(container);
     setting.addToggle((toggle) => toggle.setValue(true));
     let toggle = setting.controlEl.children[0];
-    assertEquals(toggle.attrs.type, "checkbox");
+    assertEquals(toggle.tag, "toggle-switch");
     assert("checked" in toggle.attrs);
 
     const setting2 = new Setting(makeVirtualEl());
@@ -544,9 +544,37 @@ t.describe("Setting components", (it) => {
     const button = setting.controlEl.children[0];
     assertEquals(button.tag, "button");
     assertEquals(button.text, "Save");
-    assert(button.attrs.class.includes("primary-button"));
+    assert(button.attrs.class.includes("rounded-button-primary"));
     assert(typeof button.events.click === "number");
   });
+
+  it("createProfilesList builds a plugin-profiles-list with array dids", () => {
+    const container = makeVirtualEl();
+    container.createProfilesList((list) =>
+      list
+        .setDids(["did:plc:a", "did:plc:b"])
+        .setEmptyMessage("No one here yet."),
+    );
+    const child = container.children[0]._serialize();
+    assertEquals(child.tag, "plugin-profiles-list");
+    assertEquals(child.attrs.dids, "did:plc:a,did:plc:b");
+    assertEquals(child.attrs["empty-message"], "No one here yet.");
+  });
+
+  it("createIcon builds a plugin-icon with the given name", () => {
+    const container = makeVirtualEl();
+    container.createIcon((icon) => icon.setIcon("alert-circle"));
+    const child = container.children[0]._serialize();
+    assertEquals(child.tag, "plugin-icon");
+    assertEquals(child.attrs.icon, "alert-circle");
+  });
+
+  it("createProfilesList accepts a pre-joined string of dids", () => {
+    const container = makeVirtualEl();
+    container.createProfilesList((list) => list.setDids("did:plc:a,did:plc:b"));
+    const child = container.children[0]._serialize();
+    assertEquals(child.attrs.dids, "did:plc:a,did:plc:b");
+  });
 });
 
 t.describe("fetch — header serialization", (it) => {