Pictogrammers have one small advantage over this: they give you the home assistant code for any icon in material. Sure, it's not hard to figure the code yourself, but being able to click a button and get the right one is great
They also have an API which you can use to get the icon SVG.
I love making (architecture) diagrams in D2 [1], and love using the vast library of icons from Iconify in my diagrams where it makes sense. A sample diagram with SVG from Iconfiy would look like this:
The settings icon ‘sprouting’ cogs is really nice!
The editor also looks really nice.
Could this not be used online as well? Persistence on the server instead of browser cache?
(Curious what your use case is for an offline browser based editor?)
The use case is privacy. Data getting harvested by free and even paid for services isn't pleasant (targeted ads, data breach etc)
If I get to add some "server" capability it will rather be webrtc, basically P2P to sync between devices, or a config to plug our own store. E.g GitHub, Google drive, dropbox or a self hosted service to SCP the files.
It isn't just browser cached, one can export individual documents or the entire store as a zipped folder. And back that up.
if you are able to share the repo - that's great - thanks!
i am toying with an idea of having a very light weight "idea capture" solution so i can capture my raw ideas with least friction .. and then channel them into more organized projects / drafts / blogs etc later.
experimenting with tools like obsidian+git, github.dev, wispr flow, etc as input and storage channels ... but a lightweight markdown style note editor woould probably be a useful addition. need to experiment to find out for sure though.
This makes me want to write a post about the rabbit hole that is icon optimisation. It drives me insane when websites suffer from layout shift simply because they are not inlining their icons, for one.
I agree with your comment, it is often an overlooked topic.
Inlining icons can be one answer but be aware of the growing size of your DOM. Depending on the complexity, number and repetition of the icons you are using, an approach including lazy loading can be better.
Layout shift is first and foremost caused by an improper space reservation.
Since people are posting links to alternatives, another awesome source is the noun project. Has a mix of royalty-free, Creative Commons CC-BY-3.0, and paid license icons.
My site can extend a bunch of the icon sets that are on Iconify with AI image models, so you can feel comfortable using a more unique set than just the big ones: https://universymbols.com
You’ll get a lot of responses but for me (excuse the nostalgia), icon design peaked with famfamfam’s (aka Mark James’s) Silk iconset from ~2005. It was a shame they were never available at higher resolutions (or as SVG), though I’m betting AI (either as Adobe Illustrator or Artificial Intelligence) can probably rectify that these days (and generate subpar additional icons to expand the set).
https://www.svgrepo.com
I find the site very user friendly as it lets you customize the stroke's width, color etc, see how it looks like and copy the modified version.
This site shows up on google a lot but it's a bit sketchy that there isn't a link to the source / license text. Not to mention the SEO heavy descriptions.
> Free Download Wallet 460 SVG vector file in monocolor and multicolor type for Sketch and Figma from Wallet 460 Vectors svg vector
Plus I've found the license listed isn't always accurate. For example the emojione icons are listed as MIT. But the actual repo says CC 4.0, with the non-artwork being MIT.
Honestly, I always default to material icons unless a project calls for a very specific style. The coverage is just so dang good I rarely find a scenario without an appropriate icon and the style is neutral enough to blend in with a number of UI designs.
I love making (architecture) diagrams in D2 [1], and love using the vast library of icons from Iconify in my diagrams where it makes sense. A sample diagram with SVG from Iconfiy would look like this:
[1]: https://d2lang.com/I used them for my offline text editor, the result turned wonderful (icons wise)
https://wrifocus.bounded.cc
For size consistency, better stick to the same pack or you are on for SVG editing
The editor also looks really nice. Could this not be used online as well? Persistence on the server instead of browser cache? (Curious what your use case is for an offline browser based editor?)
If I get to add some "server" capability it will rather be webrtc, basically P2P to sync between devices, or a config to plug our own store. E.g GitHub, Google drive, dropbox or a self hosted service to SCP the files.
It isn't just browser cached, one can export individual documents or the entire store as a zipped folder. And back that up.
Can you share any other details about your project -- if it can be self hosted, etc.
The purpose of self hosting isn't that useful as it's totally offline, everything goes to local storage and indexdb. It stays on the browser.
But happy to share the repo if you would like to make it your own.
if you are able to share the repo - that's great - thanks!
i am toying with an idea of having a very light weight "idea capture" solution so i can capture my raw ideas with least friction .. and then channel them into more organized projects / drafts / blogs etc later.
experimenting with tools like obsidian+git, github.dev, wispr flow, etc as input and storage channels ... but a lightweight markdown style note editor woould probably be a useful addition. need to experiment to find out for sure though.
There is stackedit, also an offline first editor. Far more mature, can sync and store to the typical storage services.
This app I made is.. more lightweight. It loads instantly for quick writing with no distractions. Pure markdown. Can organise but not mature.
My contact is via my profile if you need access give your GitHub account.
https://web.dev/articles/optimize-cls#history_of_width_and_h...
https://thenounproject.com/
Folders on my hard drive > anything hosted on the web
September 2024 (4 comments, 17 points): https://news.ycombinator.com/item?id=41615563
View: https://peacocksoftware.com/silk
Download: https://github.com/markjames/famfamfam-silk-icons/tree/maste...
But other than that, I also usually default to Material UI Icons.
https://www.flaticon.com/
> Free Download Wallet 460 SVG vector file in monocolor and multicolor type for Sketch and Figma from Wallet 460 Vectors svg vector
Plus I've found the license listed isn't always accurate. For example the emojione icons are listed as MIT. But the actual repo says CC 4.0, with the non-artwork being MIT.
https://www.svgrepo.com/svg/404123/skull-and-crossbones
https://github.com/joypixels/emojione/
Not a deal-breaker entirely, but for my own things I like differentiate.
Most users will not care if they have seen a map icon in another app before anyway.
One features that would be really nice would be to pick and icon (or a few) and compare these against all these icon sets.
So the process is "I want to have save icon matches the best my design" and go from there.
Most of my Websites/Apps don't use rasterized graphics for design anymore, SVG + CSS gradients/backgrounds & effects seem to handle everything I need.