iconify VS inter

Icons play a vital role in the web development. They guide us, convey messages, and enhance user experiences on numerous websites and applications. Whether you are an experienced developer or a beginner in web development, having a reliable source of high-quality icons is essential. This is where Iconify comes in, providing an extensive selection of icons that will breathe life into your projects.

https://iconify.design/ has been my go to for years, but I like the ability to customize the colors from the UI, although I personally use tailwind classes for my colors

Before explaining the whole code, it is worth saying that you can get all the icons used in this tutorial are from iconify

It was positioned absolutely to the parent container and was placed at the position where it is using -bottom-8 and left-[17%], the icon use there is from iconify

Svg Icons from Iconify.

Luckily, I found that in astro you can do it easily with the astro-icon package. This package uses Iconify, an icon library that combines dozens of different icon packs into one. The most interesting icon pack for me was the SVG Logos as it includes all logos for different tech companies, programming languages, etc. Now, adding these icons is as simple as:

I've been using https://iconify.design/

I couldn't agree more. I've been using it as my go-to font for web development (which is its exact design purpose) for years. Nothing looks bad in Inter[0]. It's an easy win.

The best features for web dev are great readability across its variety of weights (0-900 in CSS) from a single font file, along with a huge set of glyphs, ligatures, special numbers, etc. if you want them.

[0] https://rsms.me/inter/

Yeah no... macOS doesn't have a font that looks uncomfortably tall like that. Use Inter at 9pt font size if you really want the macOS look.

Now you also need to download and install 'Inter' font. Go here: https://rsms.me/inter/ And download it, install it. We will use it later.

It’d be nice if something like Inter[0], which is specifically designed for onscreen/UI usage, were bundled with each OS and could be assumed to be present, making it unnecessary to include Arial or Helvetica in one’s stack.

[0]: https://rsms.me/inter/

If you are really trying to mimic macOS then you should try Inter. Current version is 3.19 but the much improved version 4.0 is coming out very soon (you can download the latest beta here). This font is pretty much an open-source alternative to Apple's SF fonts and they render at the correct size on all platforms. With a little tweaking of the font rendering, you can make it look almost identical to macOS.