Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@navikt/aksel-icons

Package Overview
Dependencies
Maintainers
17
Versions
201
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@navikt/aksel-icons

800+ open source icons made by Aksel, NAVs designsystem-team

  • 5.18.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.4K
increased by3.58%
Maintainers
17
Weekly downloads
 
Created
Source

Aksel icons

800+ open source icons made by Aksel, NAVs designsystem-team

  • Designed for 24x24px
  • Available in React and SVG
  • Accessible with use of title-prop
  • Suffixed with Icon

Install

  yarn add @navikt/aksel-icons
  npm install @navikt/aksel-icons

Use

For previous users of @navikt/ds-icons, this package utilizes the same API. The only difference is that the icons are suffixed with Icon to avoid naming conflicts and visual changes to the icons themselves.

import { StarIcon } from "@navikt/aksel-icons";

function App() {
  return <StarIcon title="star" fontSize="1.5rem" />;
}

Tip: Use the title prop for accessible icons.

Sizing

Each icons width and height is default 1em. This allows you to use the native fontSize-prop to adjust sizing. We recommend using at least 1.5rem/24px for best possible visual representation.

<StarIcon fontSize="1.5rem" />

Direct svg-import

All icons are available in raw SVG-format behind /svg. Note that svg-files do not have the suffix Icon.

import StarIcon from "@navikt/aksel-icons/svg/Star.svg";

If using typescript, TS might complain about not finding types related to the svg-format. Add a *.d.ts file with this declaration to fix this. (This was copied from next/image-types/global.d.ts since next solves this internally, but should work elsewhere)

declare module "*.svg" {
  /**
   * Use `any` to avoid conflicts with
   * `@svgr/webpack` plugin or
   * `babel-plugin-inline-react-svg` plugin.
   */
  const content: any;

  export default content;
}

Learn more

License

MIT

Keywords

FAQs

Package last updated on 19 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc