# nord-icon > Icons are used to provide additional meaning or in places where text label doesn’t fit. > Icon component allows you to display an icon from the Nordicons library. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. [View Nordicons](/nordicons/) > **Do:** - Use to provide additional meaning in addition to a text label. - Use to help users who have difficulties with reading and attention. - Use in places where text label doesn’t fit (remember to add an accessible label for the icon). > **Don't:** - Don’t use for decorative purposes alone. - Don’t use when a button’s action is already clear based on the text label. - Don’t use the same icon for differing purposes, as users will come to associate icons with specific types of actions. --- ## Additional considerations - Icon components are hidden from assistive technologies by default. - Use `label` property to give an accessible label for the icon and to make it visible to assistive technologies. ## Examples ### Animal Categories ```html

``` ### Basic ```html ``` ### Color ```html

``` ### Custom Icon ```html ``` ### Custom Resolver ```html ``` ### Sizes ```html

``` ### Doc Overview ```html ``` ### Doc Sizes ```html

``` ### Doc Color ```html

``` ### Doc With Label ```html ``` ### Static ```html

``` ## API Reference ### Properties - **name** (`string`, default: `''`) — The name of the icon to display, as defined by nordicons. - **size** (`'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | undefined`, default: `"m"`) — The size of the icon. - **color** (`string | undefined`) — The color of the icon. Can accept any valid CSS color value, including custom properties. - **label** (`string | undefined`) — An accessible label for the icon. If no label is supplied, the icon is hidden from assistive technology. ### Slots - **(default)** — The default slot used for placing a custom SVG icon.