700+ Pure CSS, SVG & Figma UI Icons Available in SVG Sprite, styled-components, NPM & API

Overview

Demo - Figma - Twitter

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API

npm GitHub last commit Website npm GitHub issues GitHub stars Twitter Follow

css.gg css.gg icons

New in 2.0

🥳 200 New Icons

🚀 SVG Icons

🔥 SVG Sprite

💅 Styled Components

⚛️ React Local Styled Components

🦄 Figma Components

🔮 Adobe XD Components

Table of Contents

Get Started

Install the latest version via npm or yarn

npm i css.gg
yarn add css.gg

Using Package Manager
This package contains the following directories and files:

Path                             What it is
/css individual *.css icons
/scss individual *.scss icons
/svg individual *.svg icons
/tsx individual *.tsx icons styled-components
/all.css all icons compressed in a single file
/all.d.ts styled-components
/all.fig local figma file same as https://css.gg/fig
/all.js list of exported styled-components
/all.js.map styled-components
/all.json all icons *.css, *.svg, *.tsx including markup & public path
/all.scss all icons in a single SCSS file npm i node-sass needed
/all.svg SVG Sprite with all icons
/all.xd local adobe xd file same as https://css.gg/xd
/all.xml all icons *.css, *.svg, *.tsx including markup & public path

HTML include

1. All icons


<link href='https://css.gg/css' rel='stylesheet'>


<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'>


<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>

2. Single icon


<link href='https://css.gg/ {ICONNAME} .css' rel='stylesheet'>


<link href='https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>


<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css' rel='stylesheet'>

3. Collection


<link href='https://css.gg/css?= {ICONNAME} | {ICONNAME}' rel='stylesheet'>

4. Markup

<i class=" {ICONNAME} ">i>


<span class=" {ICONNAME} ">span>


<div class=" {ICONNAME} ">div>


<gg-icon class=" {ICONNAME} ">gg-icon>
5. Example
>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    
    <link href='https://css.gg/css' rel='stylesheet'>

head>
<body>

    
    <i class="gg- {ICONNAME} ">i>

    
    <div class="gg- {ICONNAME} ">div>

    
    <gg-icon class="gg- {ICONNAME} ">gg-icon>

body>
html>

CSS @import

1. All icons

/* css.gg */
@import url('https://css.gg/css');

/* UNPKG */
@import url('https://unpkg.com/css.gg/icons/all.css');

/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/all.css');

2. Single icon

/* css.gg */
@import url('https://css.gg/ {ICONNAME} .css');

/* UNPKG */
@import url('https://unpkg.com/css.gg/icons/css/ {ICONNAME} .css');

/* JSDelivr */
@import url('https://cdn.jsdelivr.net/npm/css.gg/icons/css/ {ICONNAME} .css');

3. Collection

/* css.gg */
@import url('https://css.gg/css?= {ICONNAME} | {ICONNAME}');

4. Resizing

To resize an icon you just need to change the value of a css variable "--ggs" to any value you like if not specified it falls back to 1 or the actual size.

.gg-{ICONNAME} {
    /* This value will multiple the actual size  */
    --ggs: 10;
}

The variable can be added to the parent, custom class,body or root level if you want all icons same size.

:root {
    --ggs: 6;
}

5. Coloring

By default all the CSS, SCSS icons inherit the color from the parent by using currentColor attribute how ever you can apply any color you like.

.gg-{ICONNAME} {
  color: teal;
}

SVG

1. SVG Sprite - Download Path

You can't use these paths, you must download since SVG doesn't allow external sources.


https://css.gg/svg


https://unpkg.com/css.gg/icons/all.svg


https://cdn.jsdelivr.net/npm/css.gg/icons/all.svg
1.1. Example
>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>


<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/>svg>

body>
html>

2. SVG Single Icon - Download Path


https://css.gg/ {ICONNAME} .svg


https://unpkg.com/css.gg/icons/svg/ {ICONNAME} .svg


https://cdn.jsdelivr.net/npm/css.gg/icons/svg/ {ICONNAME} .svg
2.1. Example - SVG Sprite
>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>


<svg><use xlink:href="path/to/all.svg# {ICONNAME} "/>svg>

body>
html>
2.2. Example - Inline SVG Sprite/Symbol

You can add as symbol each or copy the entire file contents at one of the CDN alternatives as mentioned at 2.1

>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>

  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;" >
    <symbol id="{ICONNAME}">
      
    symbol>
  svg>

  
  <svg><use xlink:href="# {ICONNAME} "/>svg>

body>
html>

2.3. Example Single copy/paste icon

You can go to https://css.gg/{ICONNAME} and copy the SVG icon directy and paste it on your project.
You can also download a single icon by just visiting https://css.gg/{ICONNAME}.svg

>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>

  
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M9 13H15V17H9V13Z" fill="currentColor" fill-opacity="0.5" /> <path d="M6 7H18V11H6V7Z" fill="currentColor" /> svg>

body>
html>

3. Encode SVG for CSS

You need to define width and height in order for this to work. Afterwards you can just create a div

.gg-{ICONNAME} {

  background-image:
    url("data:image/svg+xml,");

}

To encode use this tool
https://yoksel.github.io/url-encoder/

3.1. Example - Encoded SVG for CSS icon

>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>

    
    <i class="gg- {ICONNAME} ">i>

    
    <div class="gg- {ICONNAME} ">div>

    
    <gg-icon class="gg- {ICONNAME} ">gg-icon>

body>
html>

4. Coloring a SVG icon

By default all colors use currentColor as value in order to inherit the color from the parent.
If you wish to change that color you can do the following.

4.1. Directly on the icon

>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>

    <svg><path fill=" {COLOR} " />svg>

body>
html>

4.2. using class

>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>

    <style>
      /* 1. You define the CSS class like this:  */

      .custom__color path {
        color: teal;
      }

    style>
head>
<body>

    
    <svg class="custom__color"><path />svg>

body>
html>

JSON - paths

1. All icons


https://css.gg/json


https://css.gg/json?=&op=css


https://css.gg/json?=&op=css+markup


https://unpkg.com/css.gg/icons/all.json


https://cdn.jsdelivr.net/npm/css.gg/icons/all.json

2. Single icon


https://css.gg/json?= {ICONNAME}


https://css.gg/json?= {ICONNAME} &op=css


https://css.gg/json?= {ICONNAME} &op=css+markup

3. Collection


https://css.gg/json?= {ICONNAME} | {ICONNAME}


https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css


https://css.gg/json?= {ICONNAME} | {ICONNAME} &op=css+markup

XML - paths

1. All icons


https://css.gg/xml


https://css.gg/xml?=&op=css


https://css.gg/xml?=&op=css+markup


https://unpkg.com/css.gg/icons/all.xml


https://cdn.jsdelivr.net/npm/css.gg/icons/all.xml

2. Single icon


https://css.gg/xml?= {ICONNAME}


https://css.gg/xml?= {ICONNAME} &op=css


https://css.gg/xml?= {ICONNAME} &op=css+markup

3. Collection


https://css.gg/xml?= {ICONNAME} | {ICONNAME}


https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css


https://css.gg/xml?= {ICONNAME} | {ICONNAME} &op=css+markup

React

On a React project you can include a single icon as CSS, Styled Component, SCSS, SVG or call the contents using .json or .xml files.
Note that only styled-components icons can be called directly such as:

import { ICONNAME } from 'css.gg'

1. Styled Components 💅

After you install the package by using npm i css.gg or yarn add css.gg you can add a single icon like this:

import React from 'react'
import { ICONNAME } from 'css.gg'

export default function() {
  return (
    <div>

      <ICONNAME />

    </div>
  )
}

2. Local Single Icon as styled-component

If you need to download a single typescript or styled-componment format icon without downloading the entire package just visit the link like this:

https://css.gg/{ICONNAME}.tsx

2.1. Copy directly from the page

If you don't want to download at all but just copy paste visit the icon page and you have a special tab for it.

https://css.gg/{ICONNAME}

2.2. Local Component Example

import React from 'react';

// local path
import { ICONNAME } from "./ {ICONNAME} "

function App() {
  return (
    <div>

      <ICONNAME />

    </div>
  );
}

export default App;

3. SVG Sprite method

import React from 'react';

// Import function from package
import { SVG } from 'css.gg'

function App() {
  return (
    <div>

      <svg width="24" height="24"><use xlinkHref={SVG + '#gg-ICONNAME'} /></svg>

    </div>
  );
}

export default App;

4. All CSS icons

import React from 'react';

// Import function from package
import { CSS } from 'css.gg'

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

4.1. Single CSS icon

import React from 'react';

// Import path from package
import 'css.gg/icons/css/ {ICONNAME} .css'

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

5. All SCSS icons

SCSS format to work you need to have node-sass installed npm i node-sass

import React from 'react';

// Import function from package
import { SCSS } from 'css.gg'

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

5.1. Single SCSS icon

SCSS format to work you need to have node-sass installed npm i node-sass

import React from 'react';

// Import path from package
import 'css.gg/icons/scss/ {ICONNAME} .scss'

function App() {
  return (
    <div>

        <!-- Using i tag  -->
        <i className="gg- {ICONNAME} "></i>

        <!-- Using div tag  -->
        <div className="gg- {ICONNAME} "></div>

        <!-- Using custom tag  -->
        <gg-icon className="gg- {ICONNAME} "></gg-icon>

    </div>
  );
}

export default App;

6. Combined import SVG, CSS, SCSS etc.

import { SVG, CSS, SCSS, ICONNAME, ICONNAME } from 'css.gg'

Design Tools

1. Figma - https://css.gg/fig

All icons are available as components on assets from where you can search for a sigle icon or browse categories. css.gg figma

2. Adobe XD - https://css.gg/xd

All icons are available as components
css.gg figma

Contributors

  1. Astrit - Author
  2. JiangWeixian - Styled Components
  3. Lona - Figma/SVG Design

To become a contributor do a new pull request.

Donate

Source Link
Github Sponsor https://github.com/sponsors/astrit
Open Collective https://opencollective.com/css-gg
PayPal https://paypal.me/GjonMalsijaj

Support

Discord - https://discord.gg/e7NDKFM

v.1.0.6 or older

In order to access older versions you can use one of the provided CDN Alternatives


https://unpkg.com/browse/[email protected]/


https://cdn.jsdelivr.net/npm/[email protected]/

TODO:

  1. CSS Modules
  2. Angluar
  3. Vue.js

If you would like to contribute feel free to do a new pull request.

Comments
  • Update license

    Update license

    Hello! Great Project!

    I really liked the way you handled the pricing for this project but I don't think that an MIT license is suitable here?

    I'm looking to build projects with the same pricing structure and I hoped that you found a solution for which license to use 😸

    resolved 
    opened by ImedAdel 9
  • bootstrap button with css.gg icon not in one line

    bootstrap button with css.gg icon not in one line

    When I do this:

    <button class="btn btn-primary btn-block">
            A button <span class="gg-sort-az"></span>
        </button>
    

    the icon is moved to a new line. Like this:

    +---------------------------------------------------------------+
    |                         A button                              |
    |  [icon]                                                       |
    +---------------------------------------------------------------+
    

    I am expecting this:

    +---------------------------------------------------------------+
    |                   A button   [icon]                           |
    +---------------------------------------------------------------+
    
    resolved 
    opened by shaozi 7
  • Browser icon doesn't appear to scale completely

    Browser icon doesn't appear to scale completely

    Hello @astrit,

    I've tried to scale the browser icon up using CSS. One of the lines didn't scale proper:

    image

    This is what I've applied:

    image

    Just thought I let you know :)

    Peter

    enhancement 
    opened by spekulatius 7
  • Gradient has outdated syntax

    Gradient has outdated syntax

    The new syntax is like closest-side at 0 0 instead of 0 0, closest-side.

    This will show up in users' terminals if they're using postcss-loader or any other package that does evaluation.

    bug 
    opened by parker-codes 5
  • Icon request : Hide icon

    Icon request : Hide icon

    Hello, Would it be possible to you to create a hide icon ? By that, I mean to take the eye icon which already exists, and cross it out. If you create it, it would go complete the eye icon if someone want to use icons for a password input to reveal or hide the text, for instance. Thanks in advance !

    opened by Icare666 3
  • Pin icon fix

    Pin icon fix

    While using the various icons, I noticed that the pin icon has an issue rendering on Firefox when it is scaled:

    Screen Shot 2020-01-21 at 9 59 09 AM

    This is due to the box-shadow property being set to inset while also using the transform property to scale the item. It works well in all other browsers except Firefox. To resolve the issue, I replaced the box-shadow with a border: 2px solid and adjusted the circle to be placed correctly in the pin with the new offset being at the border. The icon looks exactly the same as it had been before, but now renders correctly across all browsers.

    opened by luisaugusto 3
  • Remove transform property from after psuedo element in copyright icon

    Remove transform property from after psuedo element in copyright icon

    As there is scale being applied to both the <i> and the pseudo element, it means that the scale applied to the psuedo element is being multiplied, so the C breaks out of the surrounding circle

    Below is a screenshot taken from the https://css.gg/copyright page:

    image

    As we can see, the C has well and truly broken out of it's surrounding boundary.

    By simply applying transform: none to the after psuedo element specifically, the result is:

    image

    opened by denno020 3
  • Icon suggestions: aws, gcp, azure, nodejs, kubernetes, python, ruby on rails, docker, linux

    Icon suggestions: aws, gcp, azure, nodejs, kubernetes, python, ruby on rails, docker, linux

    Hi,

    Very nice work!

    Just a few brand icons I thought about...

    • aws
    • gcp
    • azure
    • nodejs
    • kubernetes (dharmachakra)
    • python
    • ruby on rails
    • docker (containers)
    • linux

    Let me know what you think.

    opened by roychri 2
  • CSS vs SVG for icons

    CSS vs SVG for icons

    Hi! This is just out of curiosity, What are the pro and cons of using CSS over SVG for icons? And vice-versa.

    Anyway, thank you for this useful project!

    opened by LifeIsStrange 2
  • Angular support?

    Angular support?

    Hi, I've tried integrating css.gg on an angular project. Since this doesn't have SASS files, I added the CSS file in angular.json.

    //angular.json
    "styles": [
      "src/styles.scss",
      "node_modules/css.gg/icons-compressed/icons.css"
     ],
    

    But I'm getting this error

    WARNING in ./node_modules/css.gg/icons-compressed/icons.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/css.gg/icons-compressed/icons.css)
    Module Warning (from ./node_modules/postcss-loader/src/index.js):
    Warning
    
    (1:80606) Gradient has outdated direction syntax. New syntax is like `closest-side at 0 0` instead of `0 0, closest-side`.
    
    bug resolved 
    opened by peiris 2
  • SVG icons do not scale

    SVG icons do not scale

    The svg icons downloaded from the site do not scale with css properties height or width. Please set the height and width properties inside the svg to 100% so it scales properly. Affected platforms: anything which can display an svg

    opened by GoldenRegulus 1
  • CSS transform causes --ggs var to not resize the icon

    CSS transform causes --ggs var to not resize the icon

    If I add a transform to an icon, then --ggs variable will not apply to the icon. I can use scale along with my transform and it works.

    App.js

    <Spinner className="loading-icon" />
    

    app.css

    .loading-icon {
      postion: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,50%);
      //--ggs does not make the icon larger
      --ggs: 2; 
    }
    

    app.css - Working

    .loading-icon {
      postion: absolute;
      top: 50%;
      left: 50%;
      //icon is now scaled
      transform: translate(-50%,50%)scale(2);
    }
    

    Another alternative is wrapping the icon in a div and adding the transform to the parent div and using --ggs for the child icon.

    I created a sandbox so you can see the transform fix in action

    opened by ecupaio 0
  • Broken border-top icon

    Broken border-top icon

    The border-top icon uses a hardcoded value for one of it's paths' fills, instead of currentColor: https://github.com/astrit/css.gg/blob/master/icons/svg/border-top.svg?short_path=fd205a6#L13

    Compared to, for example, border-bottom: https://github.com/astrit/css.gg/blob/master/icons/svg/border-bottom.svg?short_path=6098ab3#L9

    This results in the path not having a fill when used from react-icons: react icons screenshot

    or having a fill that is hard to change when using the SVG directly.

    opened by ilyasmez 0
  • VueJS wrapper for css.gg icons

    VueJS wrapper for css.gg icons

    opened by IamIsPra 0
  • Incomplete Documentation for React

    Incomplete Documentation for React

    I am attempting to add an arrow long right to my project. I have a CodeSandbox set up so you can see what I have attempted. There is no documentation present on what to actually use for the ICONNAME, nor is there anything to indicate on the icon list that an icon is a styled-component or not. I just want a wee right arrow on the page and there's not a clear method to do it.

    opened by ecupaio 0
Releases(2.0.0)
Owner
Astrit Malsija
UI & Dev: @sunny-at-sea, CSS.GG
Astrit Malsija
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
A simple build tool for Figma plugins based on webpack

Figpack EXPERIMENTAL / WORK IN PROGRESS A simple build tool for Figma plugins based on webpack. It's optimized for plugins that could get complex, mea

Roman Nurik 21 Oct 9, 2022
styled component for react & style-loader/usable

react-styled ES7 decorator for dynamic stylesheet usage w/ webpack install $ npm install bloody-react-styled --save-dev require import styled from "bl

Matthias Le Brun 37 Sep 26, 2022
A Unique Food order landing page web application called 'HOMELY' where you can select available meals and add them to cart then order them.

End Result Click the link : https://foodapp-by-eniola.netlify.com Getting Started with Create React App This project was bootstrapped with Create Reac

Eniola Odunmbaku 26 Dec 31, 2022
A pure html and css library for dark mode in your website.

Dark Mode A pure html and css library for dark mode in your website. Features It has a smooth setting and also it changes via system settings aswell.

null 1 Jan 6, 2022
Delightful, performance-focused pure css loading animations.

Loaders.css Delightful and performance-focused pure css loading animations. What is this? See the demo A collection of loading animations written enti

Connor Atherton 10.2k Jan 4, 2023
Pure CSS gauge component

Pure CSS gauge v0.2 Basic gauge component made with only CSS style rules. No SVG or canvas used in this component. This component can be easily themed

Otto Salminen 4 Oct 7, 2021
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k Jan 4, 2023
A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍

React Pluto Component Design System + UI Kit A package of small but beautiful React components from the planet Pluto. To install the latest version, r

Yash Sehgal 17 Aug 8, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
A built-time CSS library for styling React components.

Stylin Stylin is a build-time CSS library that offers an elegant way to style React components. It extends CSS Modules and adds some missing features

Sultan 173 Dec 30, 2022
Gerçekten her yeni özellik için npm'de hazır bir modül aramayın, gerek yok, lütfen. DiscordJS ile çok temel bir POST request yapabilirsiniz.

client.api.channels("847172505260261449").messages.post({ data: {"content":"Aşağıdaki menüden kendinize oyun seçebilirsiniz. Bir oyunun rolünü almak i

Toasty 23 Nov 29, 2022
An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

Kelechi Okoronkwo 7 Sep 22, 2022
🖼 A pure client-side landing page template that you can fork, customize and host freely. Relies on Mailchimp and Google Analytics.

landing-page-boilerplate A pure client-side landing page template that you can freely fork, customize, host and link to your own domain name (e.g. usi

Adrien Joly 129 Dec 24, 2022
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023