
Bootstrap Icons - manjana
https://github.com/twbs/icons
======
no_wizard
Great addition by the bootstrap team. I think the lasting success of Font
Awesome[0] shows that this could potentially be a revenue angle for the
bootstrap team as well, in addition to the fact they just put out some great
first party icons!

There is a small downside here in that they are as of this alpha release
(alpha.1) svg only, so they don’t fallback to a font icon, which may or may
not be desirable. I know generally SVG is preferred (in part to accessibility
concerns, IIRC, as well as being easier to style and of course SVGs scale well
for sizing concerns)

None the less, very impressive!

[0] [https://fontawesome.com/](https://fontawesome.com/)

------
thomasqbrady
For those curious about icon fonts versus SVG, though icon fonts can be easier
for the developer to use, there are drawbacks for your users (especially in
accessibility).

But don’t take my word for it: [https://css-tricks.com/icon-fonts-vs-
svg/](https://css-tricks.com/icon-fonts-vs-svg/)

“It all comes down to browser support. If you can go IE 9+ / Android 3+,
inline SVG is better at pretty much everything than icon fonts. If you need
the deeper browser support, I feel like an inline SVG fallback would be too
big of a pain to be worth it (maintaining a PNG copy, inserting an additional
element to display PNG version, hiding SVG element… it’s weighty).”

~~~
tobr
Giving inline SVGs a full green score on “weird failures” isn’t right.

For example, plenty of SVG features, like masks and patterns, use references
to ID attributes to compose the effect. If you include multiple inline SVGs on
the same page, you now need to make sure that none of them use the same ID for
an element, or else your masks can break in unexpected and hard-to-debug ways
as some browsers get confused about which element you intended to use as a
mask.

If you’re exporting your SVG from a graphics program it’s not unlikely that
they’re generating IDs by the same deterministic method on every export,
creating such ID collisions that you’re unaware of.

~~~
thomasqbrady
Sounds like a good time to use shadow DOM, perhaps. That could isolate your
IDs… although it would complicate the style cascade...

------
spapas82
Now that's a coincidence... Just 5 minutes ago I was checking out the
Bootstrap 5 alpha site (which is really great; just check out what it offers)
and stumbled upon the Bootstrap icons project! Great stuff!

Many, many thanks to the developers!

------
simplify
My personal favorite icons are [https://heroicons.dev](https://heroicons.dev)
. All tiny, elegant SVGs.

------
AnonC
_> Bootstrap Icons are SVGs, so they scale quickly and easily and can be
styled with CSS._

Does this sentence actually refer to image icons in an implicit comparison? Or
is there a lot more to SVG (for an end user who may not modify the underlying
paths and design)?

I’ve been using Fontawesome for several years and my font declaration includes
popularly supported font formats like WOFF2, WOFF, etc. The reason I even
chose a font icon set was to easily scale and style it with CSS. It’s been
working quite well for standard and common icons. Getting it cached by the
browser is also easy with standard caching headers.

------
jonquest
I'm sure that as this is developed it will get easier, but looking over the
docs at the various ways to use these makes, for example, Font Awesome look
like a walk in the park. The font based icon solutions using just CSS classes
is fantastic not to mention it respects font sizing, colors, etc. The SVG Font
Awesome components for the various front end frameworks are typically a breeze
to drop in and start using as well. As it stands, going strictly off the docs
regarding usage, this looks like more of a chore to use and fit in with text
flow and styling.

~~~
tssva
There are components for the Bootstrap icons available for a variety of front
end frameworks which make them easy to work with.

------
julianlam
We're still stuck on FontAwesome 3 (or was it 4? The free version), so a
migration stylesheet to map FA icons to BS would be helpful

~~~
jonquest
Believe FA5 has (optional) css shims for version 4, even the free version. Not
sure about the upcoming version 6.

------
mikece
"Also available in Figma" \-- nice touch!

------
fareesh
Is inline SVG always the fastest way to include a handful of icons?

~~~
KajMagnus
Here's a StackOverflow question-answer about inline vs not-inline SVG:
[https://stackoverflow.com/questions/23210126/inline-svg-
vs-s...](https://stackoverflow.com/questions/23210126/inline-svg-vs-svg-file-
performance) _" Inline SVG vs SVG File Performance"_

(Hint: Sometimes. Depends on how many times they are repeated (if any), and
how large they are, and how often your html / css etc contents changes ...)

------
bzb3
Oh nice. Font Awesome was getting greedy.

~~~
harrydehal
You're being downvoted, but I find myself mostly agreeing with you --
FontAwesome was much more open and accessible in the early years, but have now
been monetizing presumably rather successfully after their $1m+ Kickstarter
campaign:

[https://www.kickstarter.com/projects/232193852/font-
awesome-...](https://www.kickstarter.com/projects/232193852/font-awesome-5)

I guess I never really noticed in the corporate world because my old company
would just pay the modest price for icon licenses, but on my own, I find
myself a bit more weary to purchase a $99/year subscription just to play
around with some of their nicer icons with my personal coding projects.

On the other hand, I do appreciate all the free icons they offer and how easy
it is to access them!

~~~
PixyMisa
The $99/year does cover 5 seats, so it's good value for businesses. But a
cheaper plan for individual developers and designers would be appreciated.

