NOTION DARK MODE ICONS HOW TO
NOTION DARK MODE ICONS UPDATE

NOTION DARK MODE ICONS HOW TO

Now we're going to add some more options, like icons with colored backgrounds, and think how to account for the dark mode automatically. The whole checkout flow was made with Paperform. Īlong with these icons, my teammate and founder of Optemization Tem (shout-out for this!) assembled a fresh, no-code checkout workflow, allowing users to view a gallery with icons served using Firebase via an Indify widget, and then buy icons by selecting their timezone by typing it in, picking one of the icon packs, and paying with Stripe. You can find the icons and see some previews here.

We also have icons that get you the first day of the next month, the last quarter, or that tell what date is tomorrow. the icon above gets the monday of the current week. Thanks to kind people posting snippets like the first two lines in the block above on StackOverflow! There was a lot of date- and time-crunching here - e.g. the opening part, declaring document type and the size of the icon, and a closing partĮnter fullscreen mode Exit fullscreen mode There's a couple constant SVG parts added as variables - e.g. emoji icon is made via SVG paths, while simple dark icons are just text blocks in a square-shaped container. one calculating the date for this week's Monday, or another one calculating the current year, or quarter), and taking a timezone into account.īecause icons have light mode, dark mode and emoji versions, worker also assembles different SVG code based on what icon is requested - e.g. Icons are generated at the time the request comes in - a Javascript worker assembles an icon, taking some dynamic variables (e.g. The code features a function that serves different icons based on a request URL (where the route includes icon type and the timezone).

In the end I built it all as a single Cloudflare Worker. Notion doesn't allow to embed any complex iFrames or code inside the tool, so I had to work around this limitation and learn how to add dynamic content to basic SVG. It was a simple project, but a fun one to implement.

NOTION DARK MODE ICONS UPDATE

We just shipped Dynamic Calendar Icons for Notion on Product Hunt - it's basically a bunch of different calendar icons that update based on current time and serve users icons based on their timezone.

Notion dark mode icons