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. 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. If you want to have a workspace that works both in a light and a dark mode, use gray or colored icons.Hi everyone! Val from Optemization here. The same goes for a white icon in light mode. If you use a black icon, it won’t look good in dark mode. Will custom icons work both in light and dark mode? Check out the sections above to see where you can find great libraries for animated icons. jpg file, link to a GIF file or upload it as an image. How to add a GIF to Notion icon?įollow the same steps as if you want to add any static icon. Want to learn more? Check out this 2-minute video by the Notion team about Page icons & covers. Select “Upload an image” (and upload your custom icon) or “Link” (and paste the icon link).Click the “add icon” button when hovering over the top of your Notion page.→ Check out Iconfinder free icons Notion Icons FAQ How to add icons to Notion Just click the “Copy Base64 SVG” to copy the icon data link. If you find the icon you want to use, you don’t have to download it. Here you can find all different kinds of icons: from minimalist, to hand-drawn and very detailed ones. Here is another large library with over 235,000 free icons. They give an aesthetic style to your Notion pages while keeping the simplicity of use. Minimalist icons have simple designs which make them work seamlessly within your Notion pages.Ĭhoosing to use minimalist Notion icons allows you to have clean and easy to navigate workspaces. → Check out Icones.js.org Minimalist Notion Icons Now you can upload the icon into your Notion page.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |