Skip to content

[Icons][Doc] Updates for UX Icons docs #3063

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 8, 2025
Merged

[Icons][Doc] Updates for UX Icons docs #3063

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 20 additions & 23 deletions src/Icons/doc/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@ Installation

$ composer require symfony/ux-icons

# To use provided on-demand icon sets, you also need HTTP client:
$ composer require symfony/http-client

SVG Icons
---------

Expand Down Expand Up @@ -108,24 +105,26 @@ sizing utilities for consistency and theming:
{# HTML syntax #}
<twig:ux:icon name="bi:chat" class="size-4" />

To keep your design consistent and easily adjustable, consider defining a :ref:default attribute <icons_default_attributes>. This allows you to control the size of all your icons from a single place.
To keep your design consistent and easily adjustable, consider defining a
:ref:`default attribute <icons_default_attributes>`. This allows you to control
the size of all your icons from a single place.

Icon Sets
~~~~~~~~~

.. note::
UX Icons gives you access to a wide variety of icon sets, each with its own
style. This allows you to cover different needs while maintaining a consistent
look and feel across your application.

To use icons from icon sets via `ux.symfony.com/icons`_, the ``symfony/http-client``
package must be installed in your application:
To download icons automatically from the many icon sets available, you must
first install the following package in your application:

.. code-block:: terminal
.. code-block:: terminal

$ composer require symfony/http-client
$ composer require symfony/http-client

There are many icon sets available, each with their own unique style and set of
icons, providing a wide range of icons for different purposes, while maintaining
a consistent look and feel across your application. Here are some of the most
popular icon sets available:
Some of the most popular icon sets are shown below; for the complete list,
visit `ux.symfony.com/icons`_.

======================== ======= ========== =============== =====================
Icon Set Icons License Prefix Example
Expand All @@ -144,8 +143,6 @@ Icon Set Icons License Prefix Example
`Tabler Icons`_ 5200 MIT ``tabler`` ``tabler:check``
======================== ======= ========== =============== =====================

To see the full list of available icon sets, visit `ux.symfony.com/icons`_.

Search Icon sets
~~~~~~~~~~~~~~~~

Expand Down Expand Up @@ -200,8 +197,14 @@ HTML Syntax
~~~~~~~~~~~

In addition to the ``ux_icon()`` function explained in the previous sections,
this package also supports an alternative HTML syntax based on the ``<twig:ux:icon>``
tag if the ``symfony/ux-twig-component`` package is installed:
this package also provides an alternative HTML-based syntax. Before using it,
ensure that the following package is installed in your application:

.. code-block:: terminal

$ composer require symfony/ux-twig-component

You can then use the following syntax to include icons::

.. code-block:: html

Expand All @@ -215,11 +218,6 @@ tag if the ``symfony/ux-twig-component`` package is installed:
<!-- you can also add any HTML attributes -->
<twig:ux:icon name="user-profile" height="16" width="16" aria-hidden="true" />

.. tip::

To use the HTML syntax, the `symfony/ux-twig-component`_ package must be
installed in your project.

Downloading Icons
-----------------

Expand Down Expand Up @@ -654,7 +652,6 @@ Learn more
.. _`ux.symfony.com/icons`: https://ux.symfony.com/icons
.. _`Iconify`: https://iconify.design
.. _`symfony/asset-mapper`: https://symfony.com/doc/current/frontend/asset_mapper.html
.. _`symfony/ux-twig-component`: https://symfony.com/bundles/ux-twig-component/current/index.html
.. _`W3C guide about SVG icon accessibility`: https://design-system.w3.org/styles/svg-icons.html#svg-accessibility
.. _`Bootstrap Icons`: https://github.com/twbs/icons
.. _`Boxicons`: https://github.com/atisawd/boxicons
Expand Down