← back to Rentv 2026
role icons: 13-icon SVG vocabulary for all CRE user/role types + /role-icons preview page
eaccaf1fb5f85fbdc4484338bf886e460621dd39 · 2026-07-30 20:41:42 -0700 · Steve
Files touched
A public/desk-assets/role-icons.jsA public/role-icons.html
Diff
commit eaccaf1fb5f85fbdc4484338bf886e460621dd39
Author: Steve <steve@designerwallcoverings.com>
Date: Thu Jul 30 20:41:42 2026 -0700
role icons: 13-icon SVG vocabulary for all CRE user/role types + /role-icons preview page
---
public/desk-assets/role-icons.js | 88 ++++++++++++++++++++++++++++++++++++++++
public/role-icons.html | 60 +++++++++++++++++++++++++++
2 files changed, 148 insertions(+)
diff --git a/public/desk-assets/role-icons.js b/public/desk-assets/role-icons.js
new file mode 100644
index 00000000..5483f838
--- /dev/null
+++ b/public/desk-assets/role-icons.js
@@ -0,0 +1,88 @@
+/* RENTV — CRE user/role icon set (line style, 24px, stroke=currentColor).
+ One vocabulary for every "type of user" across the Growth console, Summit Leads and the Desk.
+ Usage: el.innerHTML = ROLE_ICONS.brokers; // or ROLE_ICONS.get('Brokers')
+ All icons: viewBox 0 0 24 24, fill:none, stroke:currentColor — theme via CSS color. */
+(function (root) {
+ var A = 'viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"';
+ function svg(inner) { return '<svg ' + A + '>' + inner + '</svg>'; }
+
+ var ICONS = {
+ // Owners / Investors — building held + rising value
+ owners: svg('<path d="M4 21V5.6a1 1 0 0 1 .6-.9l6-2.6a1 1 0 0 1 1.4.9V21"/><path d="M12 21V9.2l6 2.6a1 1 0 0 1 .6.9V21"/><path d="M3 21h18"/><rect x="6" y="8" width="1.8" height="1.8"/><rect x="6" y="12.5" width="1.8" height="1.8"/><path d="M15 15.5l1.8-1.8 1.2 1.2"/>'),
+
+ // Developers — tower crane (new construction)
+ developers: svg('<path d="M11 21V4"/><path d="M11 4h9"/><path d="M11 4L4 8"/><path d="M20 4v3"/><path d="M20 7v0"/><path d="M20 7a1.6 1.6 0 1 0 0 3.2"/><path d="M14 4v2.2"/><path d="M17 4v2.2"/><path d="M7 21h8"/>'),
+
+ // Brokers — handshake (the deal)
+ brokers: svg('<path d="M8 12.5l2.4-2.3a1.4 1.4 0 0 1 1.9 0l2.5 2.4"/><path d="M3 8l3-1 5 3.5"/><path d="M21 8l-3-1-3 2.2"/><path d="M11 14l1.6 1.6a1.3 1.3 0 0 0 1.9-1.8"/><path d="M13.5 16.3l.9.9a1.2 1.2 0 0 0 1.8-1.6l-2.9-2.9"/><path d="M3 8v6l2 1M21 8v6l-2 1"/>'),
+
+ // Lenders & Capital Sources — bank / landmark (capital)
+ lenders: svg('<path d="M3 9.5 12 4l9 5.5"/><path d="M4 9.8h16"/><path d="M5.5 10v8M9 10v8M15 10v8M18.5 10v8"/><path d="M3.5 21h17"/><path d="M4.5 18h15"/>'),
+
+ // Vendors / Service Providers — toolbox / service
+ vendors: svg('<rect x="3" y="8.5" width="18" height="10.5" rx="1.5"/><path d="M3 12.5h18"/><path d="M9 8.5V7a1.5 1.5 0 0 1 1.5-1.5h3A1.5 1.5 0 0 1 15 7v1.5"/><path d="M10.5 12.5v2h3v-2"/>'),
+
+ // Legal / Attorneys — scales of justice
+ legal: svg('<path d="M12 3v18"/><path d="M7 21h10"/><path d="M5 6h14"/><path d="M8 6 5 12a2.6 2.6 0 0 0 5 0Z"/><path d="M16 6l3 6a2.6 2.6 0 0 1-5 0Z"/><path d="M12 3v0"/>'),
+
+ // Construction / Contractors / Builders — hard hat
+ construction: svg('<path d="M3 17a9 9 0 0 1 18 0"/><path d="M2.5 17h19"/><path d="M9 8.2V5.6A1.6 1.6 0 0 1 10.6 4h2.8A1.6 1.6 0 0 1 15 5.6v2.6"/><path d="M12 8V4.5"/><path d="M6.5 12l1 -2.5M17.5 12l-1 -2.5"/>'),
+
+ // Title — deed / certificate with seal ribbon
+ title: svg('<path d="M6 3h8l4 4v9a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z"/><path d="M14 3v4h4"/><path d="M7 9h6M7 12h4"/><circle cx="15" cy="16" r="2.4"/><path d="M13.4 17.8 12.6 21l2.4-1.2L17.4 21l-.8-3.2"/>'),
+
+ // Escrow — funds held in trust (vault / lock)
+ escrow: svg('<rect x="3.5" y="9.5" width="17" height="11" rx="2"/><path d="M8 9.5V7a4 4 0 0 1 8 0v2.5"/><circle cx="12" cy="14.5" r="1.6"/><path d="M12 16.1V18"/>'),
+
+ // Appraisers — value magnified on a home
+ appraisers: svg('<path d="M3 11 11 4l6 5.2"/><path d="M5 10v6.5A1.5 1.5 0 0 0 6.5 18H10"/><circle cx="16" cy="15" r="3.2"/><path d="M18.3 17.3 21 20"/>'),
+
+ // Property Managers — building + key
+ property_mgr: svg('<path d="M4 21V6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v15"/><path d="M3 21h11"/><rect x="6" y="8" width="1.6" height="1.6"/><rect x="10" y="8" width="1.6" height="1.6"/><rect x="6" y="12" width="1.6" height="1.6"/><circle cx="17.5" cy="13.5" r="2.2"/><path d="M17.5 15.7V20l1.6-1.2-1.6-1"/>'),
+
+ // Firm — company / office block
+ firm: svg('<rect x="4" y="4" width="16" height="17" rx="1.5"/><path d="M3 21h18"/><rect x="7" y="7" width="1.8" height="1.8"/><rect x="11.5" y="7" width="1.8" height="1.8"/><rect x="15.5" y="7" width="1.8" height="1.8"/><rect x="7" y="11" width="1.8" height="1.8"/><rect x="11.5" y="11" width="1.8" height="1.8"/><rect x="15.5" y="11" width="1.8" height="1.8"/><path d="M10.5 21v-4h3v4"/>'),
+
+ // Person — a named contact (fallback)
+ person: svg('<circle cx="12" cy="8" r="3.6"/><path d="M5 20a7 7 0 0 1 14 0"/>')
+ };
+
+ // Human labels + canonical order for previews / legends
+ var META = [
+ ['owners', 'Owners / Investors'],
+ ['developers', 'Developers'],
+ ['brokers', 'Brokers'],
+ ['lenders', 'Lenders & Capital Sources'],
+ ['vendors', 'Vendors / Service Providers'],
+ ['legal', 'Legal / Attorneys'],
+ ['construction', 'Construction / Contractors'],
+ ['title', 'Title'],
+ ['escrow', 'Escrow'],
+ ['appraisers', 'Appraisers'],
+ ['property_mgr', 'Property Managers'],
+ ['firm', 'Firm'],
+ ['person', 'Contact (person)']
+ ];
+
+ // Map a free-text category/role name → the best icon (used by the console rail).
+ function get(name) {
+ if (!name) return ICONS.person;
+ var n = String(name).toLowerCase();
+ if (ICONS[n]) return ICONS[n];
+ if (/owner|investor/.test(n)) return ICONS.owners;
+ if (/develop/.test(n)) return ICONS.developers;
+ if (/broker/.test(n)) return ICONS.brokers;
+ if (/lend|capital|debt|equity|financ|bank/.test(n)) return ICONS.lenders;
+ if (/vendor|service|provider|supplier/.test(n)) return ICONS.vendors;
+ if (/legal|attorney|lawyer|counsel/.test(n)) return ICONS.legal;
+ if (/construct|contractor|builder|gc\b/.test(n)) return ICONS.construction;
+ if (/title/.test(n)) return ICONS.title;
+ if (/escrow/.test(n)) return ICONS.escrow;
+ if (/apprais/.test(n)) return ICONS.appraisers;
+ if (/property manager|property mgmt|prop.?mgr/.test(n)) return ICONS.property_mgr;
+ if (/firm|company|corp|group/.test(n)) return ICONS.firm;
+ return ICONS.person;
+ }
+
+ root.ROLE_ICONS = Object.assign({}, ICONS, { META: META, get: get });
+})(typeof window !== 'undefined' ? window : this);
diff --git a/public/role-icons.html b/public/role-icons.html
new file mode 100644
index 00000000..4c472943
--- /dev/null
+++ b/public/role-icons.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>RENTV — User / Role Icons</title>
+<style>
+ :root { --ink:#0d1b2a; --muted:#5b6b7b; --line:#e4e9ef; --bg:#f6f8fb; --accent:#0a6cff; --li:#0a66c2; }
+ * { box-sizing:border-box; }
+ body { margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); }
+ header { padding:22px 28px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:baseline; gap:14px; }
+ header h1 { margin:0; font-size:20px; }
+ header .tag { font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:#fff; background:var(--accent); padding:3px 8px; border-radius:99px; }
+ header a.back { margin-left:auto; font-size:13px; color:var(--accent); text-decoration:none; font-weight:600; }
+ main { max-width:1080px; margin:0 auto; padding:26px 28px 60px; }
+ p.lede { color:var(--muted); max-width:680px; margin:0 0 22px; }
+ .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
+ .card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px 16px; text-align:center; }
+ .ic { width:40px; height:40px; color:var(--ink); margin:0 auto 10px; }
+ .ic svg { width:40px; height:40px; display:block; }
+ .nm { font-size:13.5px; font-weight:600; }
+ .key { font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,monospace; margin-top:3px; }
+ .row2 { display:flex; gap:10px; justify-content:center; margin-top:12px; align-items:center; }
+ .sw { display:flex; align-items:center; justify-content:center; border-radius:8px; }
+ .sw.sm { width:26px; height:26px; } .sw.sm svg { width:18px; height:18px; }
+ .sw.li { width:34px; height:34px; background:#eef5fc; color:var(--li); } .sw.li svg { width:20px; height:20px; }
+ .sw.dk { width:34px; height:34px; background:#0d1b2a; color:#eaf1fb; } .sw.dk svg { width:20px; height:20px; }
+ h2 { font-size:12px; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); margin:0 0 12px; }
+</style>
+</head>
+<body>
+<header>
+ <h1>RENTV — User / Role Icons</h1><span class="tag">Admin</span>
+ <a class="back" href="/social">← Growth Console</a>
+</header>
+<main>
+ <p class="lede">One line-style icon vocabulary for every type of user in the CRE targeting console — attendee roles plus the licensed-professional types. All SVG, <code>stroke=currentColor</code> (theme with CSS color). Each card shows the icon at 40px, then small / on-tint / on-dark so you can judge legibility.</p>
+ <h2 id="count">Loading…</h2>
+ <div class="grid" id="grid"></div>
+</main>
+<script src="/desk-assets/role-icons.js"></script>
+<script>
+ var grid = document.getElementById('grid');
+ grid.innerHTML = ROLE_ICONS.META.map(function (m) {
+ var key = m[0], label = m[1], svg = ROLE_ICONS[key];
+ return '<div class="card">'
+ + '<div class="ic">' + svg + '</div>'
+ + '<div class="nm">' + label + '</div>'
+ + '<div class="key">' + key + '</div>'
+ + '<div class="row2">'
+ + '<span class="sw sm">' + svg + '</span>'
+ + '<span class="sw li">' + svg + '</span>'
+ + '<span class="sw dk">' + svg + '</span>'
+ + '</div>'
+ + '</div>';
+ }).join('');
+ document.getElementById('count').textContent = ROLE_ICONS.META.length + ' user / role icons';
+</script>
+</body>
+</html>
← 835146a0 social: collapsible left Growth·LinkedIn target rail — CRE c
·
back to Rentv 2026
·
pr-intelligence: Cody c4 — person.rejected audit logging, co aed80d09 →