# How to hide a button (SVG icon) if user is logged in?
**URL:** https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514
**Category:** Development
**Created:** [April 4, 2024, 11:47pm UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514 "2024-04-04T23:47:48Z")
**Posts on this page:** 18
**Page:** 1
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 4, 2024, 11:47pm UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/1 "2024-04-04T23:47:48Z")
Hi. How can I hide a button (it’s really a SVG icon that links to something), only when someone is logged into an account, though?
---
### Author:  [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [April 5, 2024, 12:02am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/2 "2024-04-05T00:02:32Z")
You could use the `.anon` class and do it similar to this:
> [@Hide Custom Header Links from anon](https://meta.discourse.org/t/hide-custom-header-links-from-anon/277626/2):
>
> Until there is a cleaner way to do it via an upgrade of the component, you can add this css lines in your theme .anon .custom-header-links { display: none; }
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:03am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/3 "2024-04-05T00:03:36Z")
You have a `anon` class attached to the `` tag.
So you can use like:
```css
html:not(.anon) .your_svg_selector {
display: none;
}
```
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 5, 2024, 12:05am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/4 "2024-04-05T00:05:41Z")
@omarfilip @Arkshine And this will make it so that this icon is hidden from **logged in** users only? Also, where exactly is that anon class? I can’t seem to find it.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:08am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/5 "2024-04-05T00:08:43Z")
Yes.
---
### Author:  [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [April 5, 2024, 12:09am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/6 "2024-04-05T00:09:25Z")
Ah, sorry - you wanted the opposite, so: `not(.anon)`
> [@How to display a banner for visitors only?](https://meta.discourse.org/t/how-to-display-a-banner-for-visitors-only/87800/2):
>
> You can make use of the anon class added to the \ tag. More on this here: The selector in your case would be inverted like so: body:not(.anon) { #banner { display: none; } } Which effectively hides the banner unless the user is logged out.
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:10am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/7 "2024-04-05T00:10:08Z")
Ahah, I totally read the wrong way as well, my bad!
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 5, 2024, 12:10am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/8 "2024-04-05T00:10:37Z")
Oh, so it has to manually be added somehow? Mine just has:
`class="desktop-view not-mobile-device text-size-normal no-touch discourse-no-touch"`
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:13am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/9 "2024-04-05T00:13:07Z")
There is nothing to add. Discourse automatically applies an “_anon_” class if you are not logged in. So you can have a CSS saying, “If _anon_ class is not present…”.
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 5, 2024, 12:13am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/10 "2024-04-05T00:13:59Z")
> [@Arkshine](#):
>
> So you can use like:
>
> ```plaintext
> HTML:not(.anon) .your_svg_selector {
> display: none;
> }
>
> ```
This is all the stuff that links to the icon I want hidden. Which part here is the “selector”? 😮
---
### Author:  [@omarfilip](https://meta.discourse.org/u/omarfilip)
#### Post date: [April 5, 2024, 12:15am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/11 "2024-04-05T00:15:23Z")
> [@45thj5ej](#):
>
> so it has to manually be added somehow?
Yes, you will need to customize your site’s css:
> [@Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101#where-do-i-add-my-css-5):
>
> bookmark This guide explains how to make CSS changes on your Discourse site, including an introduction to CSS, where to add CSS in Discourse, and how to find the right selectors using browser inspection tools. person_raising_hand Required user level: Administrator Summary This guide covers: A brief introduction to CSS and key concepts How to add CSS to your Discourse site using theme components Using browser inspection tools to find the right CSS selectors Understanding CSS basics C…
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:15am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/12 "2024-04-05T00:15:30Z")
@45thj5ej`.header-icon-login .d-icon-user` should be okay.
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 5, 2024, 12:16am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/13 "2024-04-05T00:16:09Z")
Ok, cool, and I just place this in my CSS code?
```plaintext
HTML:not(.anon) .header-icon-login .d-icon-user {
display: none;
}
```
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:18am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/14 "2024-04-05T00:18:20Z")
```css
html:not(.anon) .header-icon-login .d-icon-user {
display: none;
}
```
You can put in your theme CSS (if available) or, better, a theme component CSS attached to your theme.
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 5, 2024, 12:18am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/15 "2024-04-05T00:18:55Z")
Ah, shoot. So, it worked, but when it gets hidden, it doesn’t slide the icon to the left of it over, so there’s a weird gap. Is there a way to make it without the gap, but without moving the order of the icons?
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [April 5, 2024, 12:19am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/16 "2024-04-05T00:19:49Z")
Try this, to include the ``.
```css
html:not(.anon) .header-icon-login {
display: none;
}
```
---
### Author:  [@45thj5ej](https://meta.discourse.org/u/45thj5ej)
#### Post date: [April 5, 2024, 12:20am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/17 "2024-04-05T00:20:36Z")
Dude, thank you so much. 🙏
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [May 5, 2024, 12:21am UTC](https://meta.discourse.org/t/how-to-hide-a-button-svg-icon-if-user-is-logged-in/302514/18 "2024-05-05T00:21:13Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.