Organization Icons

An Organization may upload custom icons in Scalable Vector Graphics (SVG) format for use as Custom Object identifiers. Icons provide visual recognition and help users quickly identify different types of objects throughout the application.

Overview

Organization-specific icons are automatically prefixed with a unique identifier based on your organiztaion name to ensure uniqueness across the system.

For example, if your organization is "Acme Corp", your icon names will be prefixed with acme-corp-.

Important

Once you have created an icon you cannot change its SVG content. Images are cached by users browsers so once they have viewed that icon they will never fetch it from the server again and will always see the icon version they downloaded. If you want to update an icon, create a new icon with the same name and a version number.

Accessing Icons

To view and manage your organization's icons:

  1. Navigate to your Organization home page

  2. Click the "Icons" link in the sidebar or navigation menu

  3. You'll see a searchable list of all icons for your organization

Only Organization Superusers can add or edit icons.

Sourcing Icons

Warning

Your organization is responsible for ensuring you have the legal right to use any icons you upload.

Do not upload copyrighted icons from the internet unless you have permission or the appropriate license.

Understanding Icon Licenses

When using icons from external sources, check the license requirements:

  • Public Domain: No attribution required, free to use

  • Creative Commons (CC-BY): Attribution required

  • MIT/Apache: Attribution required in source code

  • Commercial licenses: Follow the specific terms of your license

Including Attribution

If an icon's license requires attribution, include it in an XML comment within the SVG. Comments are preserved during sanitization and will remain with the icon.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <!--
        Icon: "molecule" by Jane Designer
        Source: https://example.com/icons/molecule
        License: CC-BY 4.0
    -->
    <circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>

Best Practices

  • Include attribution in the icon's description field as well as in the SVG

  • When in doubt about licensing, create your own icons or consult with your legal team

  • Review your organization's policies on third-party content usage

SVG Icon Best Practices

Icon Sizing

Use a square viewBox: Icons should use a square viewBox to ensure consistent sizing across the application. Common sizes include:

  • viewBox="0 0 24 24" - Small, compact icons

  • viewBox="0 0 100 100" - Medium detail icons

  • viewBox="0 0 512 512" - High detail icons

Example with proper viewBox:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>

Remove fixed width/height attributes: Do not include width or height attributes on the SVG element. The application will size icons automatically based on context:

<!-- Good -->
<svg viewBox="0 0 100 100">

<!-- Bad -->
<svg width="100" height="100" viewBox="0 0 100 100">

Using currentColor

Always use currentColor for fills and strokes: The currentColor keyword allows icons to inherit the text color from their container, making them flexible for use in different contexts (light/dark backgrounds, different color schemes)

<!-- Good - Uses currentColor -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x="10" y="10" width="80" height="80" fill="currentColor"/>
</svg>

<!-- Bad - Hard-coded color -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x="10" y="10" width="80" height="80" fill="#000000"/>
</svg>

For multi-color icons: If you need multiple colors, use currentColor for the primary color and create variations with opacity

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="45" fill="currentColor"/>
    <circle cx="50" cy="50" r="35" fill="currentColor" opacity="0.5"/>
</svg>

Keep It Simple

Optimize path complexity: Simpler icons render faster and scale better. Avoid:

  • Excessive path points

  • Tiny details that won't be visible at small sizes

  • Multiple overlapping shapes when one will do

Remove unnecessary metadata: Strip out:

  • Editor-specific metadata (Adobe Illustrator, Inkscape, etc.)

  • Comments

  • Unused definitions

  • Hidden layers

SVG Sanitization

Security notice: All uploaded SVG content is automatically sanitized to remove potentially harmful code including:

  • JavaScript (<script> tags, event handlers)

  • External references (<use> with external URLs)

  • Embedded content (<iframe>, <object>, <embed>)

  • CSS imports

Only safe SVG drawing elements are preserved (paths, shapes, gradients, etc.).

Allowed elements: The following SVG elements are safe and will be preserved:

  • Basic shapes: <circle>, <rect>, <ellipse>, <line>, <polygon>, <polyline>

  • Paths: <path>

  • Text: <text>, <tspan>

  • Grouping: <g>, <defs>

  • Gradients: <linearGradient>, <radialGradient>

  • Filters: <filter> (with safe filter primitives)

Icon Examples

Simple Geometric Shapes

Circle

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="currentColor"/>
</svg>

Square

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x="10" y="10" width="80" height="80" fill="currentColor"/>
</svg>

Triangle

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <polygon points="50,10 90,90 10,90" fill="currentColor"/>
</svg>

Diamond

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <polygon points="50,10 90,50 50,90 10,50" fill="currentColor"/>
</svg>

Star

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <polygon points="50,10 61,39 92,39 68,58 77,87 50,68 23,87 32,58 8,39 39,39"
             fill="currentColor"/>
</svg>

Heart

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M50,85 C50,85 15,60 15,40 C15,25 25,15 35,15 C42,15 48,20 50,25
             C52,20 58,15 65,15 C75,15 85,25 85,40 C85,60 50,85 50,85 Z"
          fill="currentColor"/>
</svg>

Checkmark

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M20,50 L40,70 L80,30" stroke="currentColor"
          stroke-width="10" stroke-linecap="round"
          stroke-linejoin="round" fill="none"/>
</svg>

Plus/Add

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M50,20 L50,80 M20,50 L80,50" stroke="currentColor"
          stroke-width="10" stroke-linecap="round"/>
</svg>

Molecule

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <circle cx="30" cy="30" r="8" fill="currentColor"/>
    <circle cx="70" cy="30" r="8" fill="currentColor"/>
    <circle cx="50" cy="70" r="8" fill="currentColor"/>
    <line x1="35" y1="35" x2="47" y2="65" stroke="currentColor" stroke-width="3"/>
    <line x1="65" y1="35" x2="53" y2="65" stroke="currentColor" stroke-width="3"/>
    <line x1="35" y1="30" x2="65" y2="30" stroke="currentColor" stroke-width="3"/>
</svg>

Pill/Capsule

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <rect x="25" y="20" width="50" height="60" rx="25" fill="currentColor"/>
    <line x1="25" y1="50" x2="75" y2="50" stroke="white" stroke-width="3"/>
</svg>

Beaker/Flask

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M35,10 L35,40 L20,80 C15,90 25,95 50,95 C75,95 85,90 80,80
             L65,40 L65,10 Z M35,10 L65,10"
          stroke="currentColor" stroke-width="4" fill="none"/>
    <line x1="26" y1="65" x2="74" y2="65" stroke="currentColor"
          stroke-width="2" opacity="0.5"/>
</svg>

Naming Conventions

Use descriptive names: Choose clear, descriptive names that indicate what the icon represents:

acme-corp-molecule
acme-corp-patient
acme-corp-lab-result

Separate words with hyphens

acme-corp-test-tube # Good acme-corp-test_tube # Bad acme-corp-testtube # Bad

Use version numbers for updates: Since icons cannot be changed once saved, if you need to update an icon, create a new version with a version number or year:

acme-corp-logo-2024    # Good - includes year
acme-corp-logo-v2      # Good - version number
acme-corp-logo-new     # Avoid - unclear which is newer

Tips and Tricks

Preview before uploading: Use an SVG editor to optimize and preview your icons.

Test at different sizes: Icons should be legible at both small (16x16px) and large (128x128px) sizes.

Use tools for optimization: SVG tools can automatically remove unnecessary code and optimize file size.

Maintain consistency: Use a consistent style across all your organization's icons (stroke width, corner radius, level of detail).

Troubleshooting

Icon appears too small/large

Check that you're using a square viewBox and have removed width/height attributes.

Icon is the wrong color

Ensure you're using fill="currentColor" or stroke="currentColor" instead of hard-coded colors.

Icon doesn't appear

Verify that the SVG is valid and contains allowed elements. Check the browser console for errors.

Icon looks different after upload

Some complex SVG features may be sanitized for security. Simplify your icon to use basic shapes and paths.