Custom Icons

Upload your own SVG icons for use on tags. Custom icons appear alongside the built-in icon set when you pick an icon for a tag, so you can use brand-specific symbols, sport-specific graphics, or anything else that communicates meaning at a glance.

Adding a Custom Icon

1. Go to Settings → Branding → Custom Icons
2. Click Add Custom Icon
3. Enter a Name — this is how the icon will be labeled in the icon picker
4. Paste your SVG markup into the text area, or use the file picker to upload a .svg file
5. Check the Preview to confirm the icon renders correctly
6. Click Create

SVGs are sanitized on upload — scripts, event handlers, and external references are stripped. If your icon disappears after save, check that it’s a valid static SVG.

Using a Custom Icon on a Tag

Once uploaded, custom icons are available everywhere you pick a tag icon:

1. Go to Settings → Tags and open any tag type (Advocate, Conversation, Introduction, Prospect)
2. Create or edit a tag
3. In the icon picker, scroll to find your custom icons grouped with the built-in options
4. Select it and save

The icon will appear on the tag wherever it’s displayed — in lists, on profile cards, and on the map.

Editing or Deleting an Icon

1. Go to Settings → Branding → Custom Icons
2. Click a row to edit the icon’s name or SVG content
3. Or use the Delete button on the edit screen to remove it

Deleting a custom icon removes it from every tag currently using it. Those tags keep their color but lose their icon until you pick a replacement.

SVG Tips

• Use viewBox — <svg viewBox="0 0 24 24"> lets the icon scale to any size without distortion
• Single color works best — tag icons inherit the tag’s text color; hard-coded colors inside the SVG may clash
• Keep it simple — icons render at ~16px, so fine detail will be lost
• Optimize before upload — tools like SVGOMG strip out editor metadata and shrink file size