Summary

Jira administrators can edit Issue Types and use their own custom avatar as an icon.

SVG images are not supported as Issue Type avatars and this is currently reported as a feature request in JRASERVER-43512 - Getting issue details... STATUS .
While this feature isn't implemented, this document describes a way for Jira administrators to use SVG images as Issue Type avatars.

The procedure relies on uploading a sample PNG file (which is supported) and then replacing this file with the actual SVG image.
When choosing the SVG image, keep in mind that Issue Type avatars are displayed in 16x16 pixels.

Since this isn't an out-of-the-box feature, make sure you trust the svg file source in order to prevent any security concerns, such as cross site scripting, as Jira doesn't have any code to validate the file.

Solution

1. Go to Cog icon > Issues > Issue types.

2. Click on the Edit button related to the issue type you would like to change the avatar.

   Expand to see screenshot...

   

   • In this example we are changing the avatar of the Epic issue type.
     
     
3. On the Edit Issue Type screen, click on select image.
4. Click on Browse and choose the sample png image from your computer.
   • Crop the image as you want and click on Confirm.
     
     
5. Back on the Edit Issue Type screen, click on Update.

   • You will be sent back to the Issue types screen with the changed avatar for the Epic issue type.

     Expand to see screenshot...

     

     
     
     

6. Right/Control click on the new avatar image and select view image.

   Expand to see screenshot...

   

   • This will show you the URL to the avatar similar to the below; save the avatar ID to use in the next steps.

     <Jira Base URL>/secure/viewavatar?size=xsmall&avatarId=10601&avatarType=issuetype

7. Run the following SQL query on the Jira database to update the avatar type to svg.

   update avatar
   set contenttype = 'image/svg+xml'
   where id = <avatarId>;

8. Access the terminal of the Jira server and upload the svg file to a temporary folder – let's say /tmp.
   • If running Jira Data Center with multiple nodes, you need to perform this only on one of the nodes of the cluster.
     
     

9. Run the following command to the png files generated by Jira with the actual target svg file.
   Jira parses the uploaded png file and generates multiple files with different sizes, placing them in <Jira local home>/data/avatars in Server and in <Jira shared home>/data/avatars on Data Center.

   ---

   • Jira Server
   • Jira Data Center

   find <Jira local home>/data/avatars -name "<avatarId>*" -type f -print0 | xargs -0 -I % cp -v /tmp/<svg avatar file name> %

   find <Jira shared home>/data/avatars -name "<avatarId>*" -type f -print0 | xargs -0 -I % cp -v /tmp/<svg avatar file name> %

   Expand to see an example...

   $ find /var/atlassian/jira-shared-home/data/avatars -name "10601*" -type f -print0 | xargs -0 -I % cp -v /tmp/Atlassian-horizontal-blue-rgb.svg %
   
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xxlarge_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_medium_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_large@3x_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xlarge_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_small@3x_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xxxlarge_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_small_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xxlarge@3x_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xsmall_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xxxlarge@2x_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xxlarge@2x_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_xxxlarge@3x_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png
   /tmp/Atlassian-horizontal-blue-rgb.svg -> /var/atlassian/jira-shared-home/data/avatars/10601_ff2f1937-a8a9-4f89-83b1-bb9a3ad83211.png

   ---

10. Once this is done, you may get a broken image if accessing any Epic issue.

    Expand to see screenshot...

    

    • This occurs because changes occurred on the backend and they weren't commited to the Jira cache.
      
      

11. Clear the Jira cache by choosing one of the options below. If you don't have ScriptRuner for Jira App, you will need a downtime.

    ---

    • With ScriptRunner
    • Without ScriptRunner

    1. Go to the ScriptRunner administration page and access the Script Console screen.

    2. In the Script Console, add the following code.

    import com.atlassian.jira.component.ComponentAccessor
    import com.atlassian.jira.avatar.CachingTaggingAvatarStore
    
    def ctas = ComponentAccessor.getComponent(CachingTaggingAvatarStore)
    ctas.onClearCache(null)

    3. Click on Run button to execute the script.
        You may get a null result as shown below.

    Expand to see screenshot...

    

    
    

    
    

    1. Stop Jira following your standard procedure.
        If running Jira Data Center you must stop all nodes.

    2. Start Jira following your standard procedure.
       If running Jira Data Center, start each node at a time.

    ---

    
    

12. Access any Epic issue and confirm the new icon was applied.
    You may need to force refresh the page to bypass the local browser cache.

    Expand to see screenshot...

    

See Also

JRASERVER-43512 - Getting issue details... STATUS

JSDSERVER-5540 - Getting issue details... STATUS

Missing issue type avatar from remote issue link in Jira

JIRA doesn't render Issue Type icon in Issue Navigator