DOCSEARCHbyAlgolia
Submit Docs

Lineicons

repository·main·Indexed 41 days ago

https://github.com/lineiconshq/lineicons

A library of high-quality, line-style icons for web and design projects. Version 1.3.2 supports traditional icon font implementation via CSS and a modern SVG Web Component approach using the <line-icon> custom element.

Tokens
838
Snippets
6
Records
6
Agent score
1%

What's inside Lineicons

  2. Use Lineicons as an Icon Font (CSS)

    main

    To use Lineicons as a traditional icon font, link the lineicons.css file in your HTML <head>. You can then render icons using <i> elements with the lni base class and a specific icon class (e.g., lni-add-file).

    <head>
  <link href="[/project_path]/dist/lineicons.css" rel="stylesheet" />
</head>

<body>
  <i class="lni lni-add-file"></i>
</body>

  4. Use Lineicons as SVG Web Components

    main

    For greater flexibility (scaling, multi-color, and advanced CSS animations), you can use Lineicons as SVG Web Components. This method uses the <line-icon> custom element and requires importing the lineicons.js module.

    <!-- 1. Import the module -->
<script type="module" src="[/project_path]/dist/lineicons.js"></script>

<!-- 2. Use the custom element -->
<line-icon name="home" type="regular"></line-icon>

  5. Reference: <line-icon> Web Component Attributes

    main

    When using the SVG Web Component approach, the <line-icon> element accepts the following attributes:

    • name: The identifier for the specific icon (e.g., home).
    • type: The style variant of the icon (e.g., regular).
    <line-icon name="home" type="regular"></line-icon>

  6. Use the <line-icon> Web Component

    main

    The <line-icon> custom element allows you to use Lineicons as SVG-based web components in HTML, Vue, or other frameworks. The component automatically handles SVG injection and ensures icons inherit the text color via currentColor.

    Properties

    PropertyTypeDefaultDescription
    nameString""The specific name of the icon to display.
    typeString"regular"The icon style category (e.g., regular).
    styleString""An inline style string applied to the icon container.

    Default Styling

    • Dimensions: The component defaults to 24px by 24px and is displayed as inline-block.
    • Coloring: Icons use currentColor. You can change the icon color by setting the color CSS property on the <line-icon> element or its parent.
    <!-- Basic usage -->
<line-icon name="home" type="regular"></line-icon>

<!-- Customizing color and size via style attribute -->
<line-icon name="user" type="regular" style="color: red; width: 48px; height: 48px;"></line-icon>