feat(simple-icons): init by scarcekoi · Pull Request #2173 · catppuccin/userstyles

scarcekoi · 2026-03-14T01:40:57Z

🎉 Theme for Simple Icons 🎉

Simple Icons has icons for brands.

💬 Additional Comments 💬

Pictures:

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

🗒 Checklist 🗒

I have read and followed Catppuccin's submission guidelines.
I have made a new directory underneath /styles/<name-of-website> containing the contents of the /template directory.
- I have ensured that the new directory is in lower-kebab-case.
- I have followed the template and kept the preprocessor as LESS.
I have made sure to update the userstyles.yml file with information about the new userstyle.
I have included the following files:
- catppuccin.user.less - all the CSS for the userstyle, based on the template.

Co-authored-by: uncenter <uncenter@uncenter.dev>

uncenter · 2026-04-13T19:05:44Z

+    main > ul > li > .links > a.brand-guidelines {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="@{text}"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+
+      &:where(.dark, .dark *) {
+        @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="@{text}"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>');
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+    }
+    main > ul > li > .links > a.license {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="@{text}"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5 5 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5 5 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+
+      &:where(.dark, .dark *) {
+        @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="@{text}"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m3 6 3 1m0 0-3 9a5 5 0 0 0 6.001 0M6 7l3 9M6 7l6-2m6 2 3-1m-3 1-3 9a5 5 0 0 0 6.001 0M18 7l3 9m-3-9-6-2m0-2v2m0 16V5m0 16H9m3 0h3"/></svg>');
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+    }
+    .icon-details-modal>:first-child>button::before {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+
+      &:where(.dark,.dark *) {
+        @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+    }
+    .copy-button-black::before {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{base}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+    }
+    .copy-button-white::before {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+    }
+    main>ul>li>:first-child::before {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{text}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+
+      &:where(.dark,.dark *) {
+        @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="@{base}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>');
+        background-image: url("data:image/svg+xml,@{svg}");
+      }
+    }
+    main>ul>li .deprecated>span {
+      @svg: escape('<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" version="1.0"><g transform="translate(-4.555 -3.769)scale(.15445)"><path fill="@{yellow}" stroke="@{base}" stroke-width="3.111" d="M31.952 79.01c-.416.801-.907 1.551-.907 2.431l.004.368c0 1.9 1.487 3.049 3.197 3.049h55.25c1.71 0 3.183-1.424 3.183-3.324l-.018-.37c0-.88-.433-1.644-.907-2.432L64.392 29.648c-1.21-1.343-3.17-1.343-4.378 0z"/><circle cx="23.921" cy="74.475" r="8.042" overflow="visible" style="marker:none" transform="translate(49.546 33.731)scale(.54212)"/><path d="M62.486 43.817c1.713 0 4.37 1.365 4.37 3.06l-1.278 17.615c0 1.695-1.38 3.06-3.092 3.06s-3.091-1.365-3.091-3.06l-1.493-17.615c0-1.695 2.871-3.06 4.584-3.06" overflow="visible" style="marker:none"/></g></svg>');
+      background-image: url("data:image/svg+xml,@{svg}");
+    }
+  }


Can we use filters to theme some of these icons, those which are single-color? https://userstyles.catppuccin.com/contributing/guides/images-and-svgs/#monochrome-img-elements

scarcekoi added 6 commits March 13, 2026 20:37

feat(simple-icons): init

0aad4a0

feat(simple-icons): add css from upstream

4a86b65

feat(simple-icons): theme

749cfda

fix(simple-icons): theme icons

f8f11c5

fix(simple-icons): correct text on latte

0fb0f25

chore: add port to userstyles.yml

95bd4e9

scarcekoi requested review from WalkQuackBack and uncenter as code owners March 14, 2026 01:43

scarcekoi added 5 commits March 13, 2026 21:44

fix(simple-icons): please the linter

443b414

fix(simple-icons): remove duplicate

18b12d0

feat(simple-icons): theme legal and brand icons

c2ae7d1

feat(simple-icons): add accent support

eeaf8dc

feat(simple-icons): theme more icons

73b32fd

uncenter reviewed Mar 14, 2026

View reviewed changes

Comment thread styles/simple-icons/catppuccin.user.less Outdated

Comment thread styles/simple-icons/catppuccin.user.less Outdated

Comment thread styles/simple-icons/catppuccin.user.less

scarcekoi and others added 10 commits March 14, 2026 08:17

fix(simple-icons): remove :root

95506fe

Co-authored-by: uncenter <uncenter@uncenter.dev>

fix(simple-icons): remove stuff in the standard library

4ccf5a4

fix(simple-icons): use nesting

4b2fe41

Co-authored-by: uncenter <uncenter@uncenter.dev>

fix(simple-icons): use nesting

4f5d2a9

feat(simple-icons): theme copy button

b3b4636

feat(simple-icons): theme all copy buttons

a4eaf71

Merge branch 'main' into feat/simple-icons

e3dc5d2

feat(simple-icons): theme yellow sign

1f3c42a

fix(simple-icons): please the linter

92c99e6

fix(simple-icons): use surface0 instead of overlay0 for borders

3ad328f

uncenter reviewed Mar 17, 2026

View reviewed changes

Comment thread styles/simple-icons/catppuccin.user.less Outdated

fix(simple-icons): use sky

53c81c4

Co-authored-by: uncenter <uncenter@uncenter.dev>

WalkQuackBack added 0.kind: init A new userstyle 5.needs: staff-review A review by a staff member is required/needed labels Mar 18, 2026

uncenter reviewed Apr 13, 2026

View reviewed changes

Comment thread styles/simple-icons/catppuccin.user.less

scarcekoi added 2 commits April 13, 2026 16:11

style(simple-icons): add comment

8d7cadc

Merge branch 'main' into feat/simple-icons

800afe7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(simple-icons): init#2173

feat(simple-icons): init#2173
scarcekoi wants to merge 24 commits intocatppuccin:mainfrom
scarcekoi:feat/simple-icons

scarcekoi commented Mar 14, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

uncenter Apr 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

scarcekoi commented Mar 14, 2026

🎉 Theme for Simple Icons 🎉

💬 Additional Comments 💬

🗒 Checklist 🗒

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

uncenter Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants