goauthentik / goauthentik/authentik

FontAwesome icon support only includes fas (solid) icons, missing fab (brands) for social login providers

Open Beginner friendly
#19,517 1 comment 5 reactions 0 assignees View on GitHub
enhancement/confirmed
Dominant language
Python
Stars
25.6k
Forks
2k
Avg merge
1d 4h
Merged PRs (30d)
634

Description

### Describe the bug

The FontAwesome icon support introduced in PR #19233 (commit d949564) only supports fas (FontAwesome Solid Classic) icons but does not support fab (FontAwesome Brands) icons. This severely limits the usefulness of the feature since most social login providers (Google, LinkedIn, Facebook, Twitter, etc.) use brand icons from the fab icon set.

### How to reproduce

1. Go to Admin Interface → Applications → Providers → Social Login Provider
2. Try to set a FontAwesome brand icon (e.g., `fa://fa-google`, `fa://fa-linkedin`, `fa://fa-facebook`)
3. The icon will not display correctly because the code hardcodes `fas` class instead of allowing other icon families

### Expected behavior

The FontAwesome icon support should allow manual specification of different FontAwesome icon families, such as:

- `fas` - FontAwesome Solid Classic
- `fab` - FontAwesome Brands (essential for social login providers)
- `far` - FontAwesome Regular
- `fal` - FontAwesome Light (if available)

For example, allow syntax like `fa://fab/fa-google` or `fa://fa-brands/fa-linkedin` to manually specify the icon family.

### Screenshots

Current code in `web/src/elements/utils/images.ts` line 35 hardcodes `fas`:

```
const classes = [className, "font-awesome", "fas", src.slice(FontAwesomeProtocol.length)]
```

### Additional context

Social login providers typically use brand icons:

- Google: `fa-google` (fab)
- LinkedIn: `fa-linkedin` (fab)
- Facebook: `fa-facebook` (fab)
- Twitter/X: `fa-twitter` (fab)
- GitHub: `fa-github` (fab)

While some social login providers already have icons included in Authentik, many others (e.g., LinkedIn) do not, making FontAwesome brand icons the only viable option for consistent branding.

### Deployment Method

Docker

### Version

2025.12.1

### Relevant log output

```shell
No relevant log output - this is a frontend icon rendering limitation.
```

Contributor guide

Open the contributing guide

Research direction

Start in web/src/elements/utils/images.ts at the FontAwesomeProtocol handling and the classes array around line 35. Trace how fa:// sources are converted into CSS classes, then verify that the existing solid-icon syntax still works alongside manually specified fab, far, or other supported families. Done means brand icons such as fa://fab/fa-google render correctly in the Admin Interface.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Active
Clarity
Clearly specified
Newbie friendliness
78/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.