nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

How To Use Confluence UI Icons

Steven Kalinke

Hey,

In order to help people getting to know Confluence, it is helpful to show what icons they need to click to do something. I’m referring to these icons:

I found that there is an npm atlaskit package, and also a doc website:

https://atlaskit.atlassian.com/packages/core/icon

But I’m unable to extract the font, or to use the actual icons on my page.

Is this possible at all? I would like to avoid making small screenshot of the icons...

Thanks for any help

Steven

Accepted answers

Former user

Hi Steven,

I don't think there's any direct or easy way to do it. If you're interested in all icons, you can find the SVG files here by the way: https://bitbucket.org/atlassian/atlaskit-mk-2/src/master/packages/core/icon/svgs/

What you could maybe do is take a screenshot (or use the SVGs) to create custom emojis and then you could re-use those without having to find / copy / paste the same images all the time.

Cheers,
Sven

All comments

Former user

Hi Steven,

What you could maybe do is take a screenshot (or use the SVGs) to create custom emojis and then you could re-use those without having to find / copy / paste the same images all the time.

Cheers,
Sven

Steven Kalinke

Thanks for pointing to the repo! However, It would be great if Atlassian would include this within their emoji menu; e.g., `:confluence_watch:`

Monty_w6ynmh

I would also love to have all these icons added. Either to the Emoticon, Symbol, or even better under their own category.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

cloud

confluence-cloud